Is there a way to get the loaded extensions?
For example, can I get the measurement extension by doing something like:
let m = viewer.Measurement
And then invoking the measurement methods like enabling and disabling it?
I found it, it's with:
let MeasureExtension = viewer.getExtension("Autodesk.Measure");
And to view all the extension you can use viewer.loadedExtensions.
Related
I have a Vue application and I'm trying to debug it in Chrome DevTools. The problem is when I try to find the file I want to debug, I get a list of files with the same name plus some weird hash tacked onto the end:
When I open any one file, I get some garbled minified code:
Sometimes I can find the file I want (with the original source code) but sometimes not.
What are these weird files and how can I find the file I want (with the original source code). Is there a way of getting the DevTools to list only the original source code files?
Thanks.
What tool in dev tools are you using to get that list? Seems like a list of cached files, so it's showing all the old versions of your code.
If you go to the network tab and reload the page. You should see a list of all the resources downloaded by the browser. Choose the js filter and you should see your vue js bundle (made by webpack) somewhere in that list.
To allow chrome to display the source correctly you need to generate the Source Maps in development deployments.
I am not sure what tool you are using to build and bundle, but it is likely that you might have support for this already.
Chrome Details:
https://developer.chrome.com/docs/devtools/javascript/source-maps/
OMG - debugging my debugging environment. It's SO maddening.
I'm working with Vue v2, and I'm using vuetify in my app. Here is a complete vue.config.js configuration that solved this problem for me.
// vue.config.js file
const path = require('path')
const { defineConfig } = require('#vue/cli-service')
module.exports = defineConfig({
transpileDependencies: [
'vuetify'
],
configureWebpack: config => {
if (process.env.NODE_ENV === 'development') {
// See available sourcemaps:
// https://webpack.js.org/configuration/devtool/#devtool
config.devtool = 'eval-source-map'
// console.log(`NOTICE: vue.config.js directive: ${config.devtool}`)
config.output.devtoolModuleFilenameTemplate = info => {
let resPath = path.normalize(info.resourcePath)
let isVue = resPath.match(/\.vue$/)
let isGenerated = info.allLoaders
let generated = `webpack-generated:///${resPath}?${info.hash}`
let vuesource = `vue-source:///${resPath}`
return isVue && isGenerated ? generated : vuesource
}
config.output.devtoolFallbackModuleFilenameTemplate =
'webpack:///[resource-path]?[hash]'
}
},
})
I found a work around for this. While you can not see the source code of your file, just change the code (add console or sth.) of the file you want to see while Vue is hot reloading your changes. It occurs to me that the source code is then reachable when you check the developer console.
There is a surprising number of developers I meet on projects that have no idea there are official browser extensions for debugging Vue, Router, VueX etc.
Stumbling across this question prompted me to post this life saving link for those that land here and have missed the existence of this essential tool:
https://devtools.vuejs.org/guide/installation.html
I need to go back to home default view on Forge Viewer, after a few times go for searching and follow some tutorials to load extension i have something like this
let res = _viewer.loadExtension('Autodesk.GoHome')
if(res){
_viewer.getExtension('Autodesk.GoHome', (gohome)=>{
gohome.active()
})
It not work for me and have an error like "gohome is not a function" ?. Did i do something wrong ?
You have a race condition problem in your code.
I will not get into details here, but briefly speaking, things like "gohome is not a function" usually means that you use an object before it was fully created/initialized.
Try changing your code into:
_viewer.loadExtension('Autodesk.GoHome').then(
(gohome) => {
gohome.active();
})
This should solve the problem.
How Can I filter only the requests with errors in google chrome network devtools?
Option 1: Filtering HTTP Status Codes
You can filter responses by their status code — Here's a useful list with all HTTP's Status Codes.
AFAIK this filtering feature has been working for years. It's through the status-code property (you can see all properties you can use here, in Google Developers).
As explained:
status-code. Only show resources whose HTTP status code matches the
specified code. DevTools populates the autocomplete dropdown menu with
all of the status codes it has encountered.
While it's not as useful as a regex expression or a wildcard, it can narrow down a lot. For instance, if you want to see all requests with error 403, the filter is status-code:403.
There's a useful plot twist: you can use negative filters, i.e.: -status-code:200 (notice the prepended - sign). That will filter out all requests with a 200 code, showing only, for the most part, troubled requests.
With all the 200's out of the way, you can sort the status column for a better experience.
Option 2: Work with the HAR format
For a more in-depth analysis, almost as quick, you can easily export the whole networking log, and its details, to a HAR (HTTP ARchive) file. Right-click:
Paste it into your favorite editor. You'll see it's just a JSON file (plain text). You can always search for "error" or RegExp expressions. If you know a bit of JS, Python, etc., you can quickly parse it as you wish.
Or you can save it as *.har file, for instance, and use a HAR analyzer, like Google's free analyzer:
There are a lot of tools that will help you analyze HAR files. Apps like Paw, Charles, and others can import HAR and show it to you as a history of requests. AFAIK Postman doesn't understand HAR yet, but you can go to your network tab and copy in cURL format instead of HAR (or use a HAR->cURL converter like this one) and import it right into Postman.
There's no such functionality.
The Filter input doesn't apply to the Status column.
You can augment devtools itself by adding a checkbox in the filter bar:
open the network panel
undock devtools into a separate window
press the hotkey to invoke devtools - CtrlShifti or ⌘⌥i
paste the following code in this new devtools window console and run it
{
// see the link in the notes below for a full list of request properties
const CONDITION = r =>
r.failed ||
r.statusCode >= 400;
const label = document.createElement('label');
const input = label.appendChild(document.createElement('input'));
input.type = 'checkbox';
input.onchange = () => {
const view = UI.panels.network._networkLogView;
view.removeAllNodeHighlights()
view._filters = input.checked ? [CONDITION] : [];
view._filterRequests();
};
label.append('failed');
UI.panels.network._filterBar._filters[1]._filterElement.appendChild(label);
}
You can save this code as a snippet in devtools to run it later.
To quickly switch docking mode in the main devtools press CtrlShiftD or ⌘⇧D
Theoretically, it's not that hard to put this code into resources.pak file in Chrome application directory. There are several tools to decompile/build that file.
The full list of internal request properties is in the constructor of NetworkRequest.
Is there a way to detect Google Chrome's version from the console.
I know I can parse the user agent string - but I prefer a more concise way.
Here is what I currently have:
var uaStr = navigator.userAgent.toLowerCase();
var index = uaStr.indexOf('chrome/');
uaStr.substring(index +7,index+11);
I would like to know if there's a better way - something like chrome.version()
Thanks.
In Chrome DevTools Console execute the following statement:
> navigator.appVersion.match(/.*Chrome\/([0-9\.]+)/)[1]
And you will get the version number as a string
> "51.0.2704.103"
When executing a script directly in the console in Chrome, I saw this:
Does anyone know what's the meaning of VM117:2
What does VM stand for ?
It is abbreviation of the phrase Virtual Machine.
In the Chrome JavaScript engine (called V8) each script has its own script ID.
Sometimes V8 has no information about the file name of a script, for example in the case of an eval. So devtools uses the text "VM" concatenated with the script ID as a title for these scripts.
Some sites may fetch many pieces of JavaScript code via XHR and eval it. If a developer wants to see the actual script name for these scripts she can use sourceURL. DevTools parses and uses it for titles, mapping etc.
Thanks to #MRB,
I revisited this problem, and found the solution today,
thanks to https://stackoverflow.com/a/63221101/1818089
queueMicrotask (console.log.bind (console, "Look! No source file info..."));
It will group similar elements, so make sure you add a unique identifier to each log line to be able to see all data.
Demonstrated in the following example.
Instead of
data = ["Apple","Mango","Grapes"];
for(i=0;i<10;i++){
queueMicrotask (console.log.bind (console, " info..."+i));
}
use
data = ["Apple","Mango","Grapes"];
for(i=0;i<data.length;i++){
queueMicrotask (console.log.bind (console, " info..."+i));
}
A better way would be to make a console.print function that does so and call it instead of console.log as pointed out in https://stackoverflow.com/a/64444083/1818089
// console.print: console.log without filename/line number
console.print = function (...args) {
queueMicrotask (console.log.bind (console, ...args));
}
Beware of the grouping problem mentioned above.