I am asking about Google Chrome Debugging, but it could be a question about any browser that does this in their debugging.
I have a piece of javascript that runs several times a second for a number of seconds. It does a load of calculations. These calculations are done on floating point variables, BUT I suspect after several seconds an undefined number is accidently stumbled upon.
I do not know when it happens and cannot predict it myself. So I need the debugger to pause and let me inspect the code when some maths is done involving an undefined number.
I want to rule out loads of editing within the code. I do not want to put in a load of debugger; lines in conditional statements. I am looking for a way for the browser to spot I am using an undefined and pause the debugging console.
How can I get Google Chrome (or any other browser with a decent debugging mode) pause when it reaches a calculation that involves an undefined number?
You can check for undefined and use the debugger; keyword.
Within your code
...
if (xyz === undefined) {
debugger;
}
...
For more details, see here: https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints#debugger
Related
In my code, I have this workflow:
When user wants to see some things, add Sprites using 'DataVizCore.addViewables()'
Use 'viewer.addEventListener(DataVizCore.MOUSE_CLICK, onDotClick)' to show info bubble
When user wants to show other things, call 'DataVizCore.removeAllViewables()' to clear Sprites
Repeat from step 1
This sequence works OK except in one situation.
If a sprite was selected (by clicking on it) before removeAllViewables() is called, I don't get MOUSE_CLICK event for newly added Sprites. In browser console, I see following error is thrown.
CustomViewables.js:318 Uncaught TypeError: Cannot read property 'style' of undefined at ViewableData.getViewableUV (developer.api.autodesk.com/modelderivative/v2/viewers/7.*/extensions/DataVisualization/DataVisualization.js:454)
As a workaround, I added 'event.hasStopped = true' to click event handler to prevent Sprite getting selected internally. That seems to work.
This seems like a bug in DataVizExtension to me. Or, my workflow is wrong?
Thanks
Bandu
Bandu. Thanks for the detailed steps to reproduce this issue. I tried with v7.46.0 version of the DataVisualization.js (latest as of my message) but was not seeing the same issue. I'd be curious if you are using this same version of the Forge Viewer (you can figure that out by looking at the viewer3D.js fetched under the Network tab of Chrome DevTools).
Setting event.hasStopped = true works because it internally avoided the code path calls into getViewableUV that threw the exception, but the flag is meant for other use cases (e.g. overriding default sprite selection behavior).
In any case, I've just tweaked our internal code to make use-cases like yours more robust. The changes will be released with the upcoming v7.47.0. Thank you for your feedback 🙂
I am facing a problem, where there is a function executed the next line right after a gotoAndStop(130) action, the function depends in its work on the objects inside this frame. but the problem is that the function seems not seeing any children.. why? why? why? why?
myMc.gotoAndStop(130);
create_waypoints(par1,par2,par3);
the function creat_waypoints depends on the drawn obstacles that exists in frame 130 inside the myMc.
it seems (but I don't know for sure) by the time that creat_waypoints executes its actions, frame 130 was just entered but not yet loaded...
What can I do? Thanks in advance..
after many experiments, I have come to a working solution but it is twisted, it had to skip an entire loop of actions and I am not happy with it, but for now it is all what I have..
myMc.gotoAndStop(2);
myMc.addEventListener(Event.ENTER_FRAME,mc_ef,false,0,true);
function mc_ef(e:Event):void {
if (e.target.loaded==null) {
e.target.loaded=true;
} else {
e.target.loaded=null;
creat_waypoints(par1,par2,par3);
e.target.removeEventListener(e.type,arguments.callee);
}
}
A simpler work-around would be including the "obstacles" and their dependencies in earlier frame where the depending logic is written. They can be included as "out-of-stage" invisible members.
I'm testing various performance tweaks for a large website, and I need to quantify how long it takes from initial load to the document elements appearing (i.e. time to paint). Is there a good way to do this using Chrome's dev profiler?
To clarify, I need to know the total time from load to painted page.
You could do one of two things:
1) Use Dan Mayor's method. You can simply use new Date().getTime before and after the painting script and subtract them in order to find out how long the script took to complete. However, this may be subject to lag if the entire code lags. It's not necessarily the most accurate way, but it gets the job done. (However, you could create a separate function that calculates the time independently of the other script. See below:)
function findTime(done){
if (done==false){var time1 = new Date.getTime();}
if (done==true) {var time2 = new Date.getTime(); window.alert(time2-time1);}
}
Where done is a boolean parameter you would add after the script is complete.
2) Chrome has a nice developer's console with a timeline capability. Basically, open your Chrome browser and hit command+Shift+C (control+shift+C for windows), and click the timeline button. Then, click the little dot at the bottom of the console, and it should turn red. Refresh the page, and the timeline will start collecting all kinds of timing data for your scripts. Painting events are shown in green. Unfortunately, this is a third party solution.
In the end, there is no way to directly measure this time, due to different amounts of lag, different internet connectivity speeds, processor speeds, etc. However, these 2 methods come pretty close to the actual answer. You may want to test the scripts on different browsers and computers.
For starters, I would definitely familiarize myself with the "Net panel" in Firebug:
http://getfirebug.com/network
I understand that Chrome has a similar tool: Hit "F12" (or use the "wrench" icon):
https://developers.google.com/chrome-developer-tools/
You might want to look into the "DOMContentLoaded" event, this is what jQuery binds to to provide it's .ready() method. The basic idea is you will want to use Date.getTime() to record millisecond values, the first should be the last line of your document (for html downloaded marker). The second you want to call after onload, DOMContentLoaded, loaded and other DOM ready state events.
Quick example (end of your html output):
<script type="text/javascript">
window.downloadComplete = new Date().getTime();
document.onload = function() { window.domParseComplete = new Date().getTime(); }
window.onload = function { window.renderComplete = new Date().getTime(); }
window.paintTime = window.renderComplete - window.downloadComplete;
</script>
In this example window.downloadComplete will be the millisecond when the DOM has finished downloading, window.domParseComplete is the millisecond when the DOM has been parsed and window.renderComplete is the millisecond when the window reports it's rendering is complete. The window.paintTime is just the number of milliseconds calculated from these millisecond time's.
I have been playing around with a very simple HTML5/Canvas based drawing app, just for the browser. I am setting it up as a proof of concept to play around with different programmatic drawing effects and such. However, I running into an issue, namely a SecurityError, when I try to grab the ImageData from the canvas 2d context.
Now, I know all about the security issues with cross-browser content and running on a webserver with local content and all that. This is not my issue. I am using no images. And the weirder thing is that I can grab the ImageData in some places in my code, but not others. Specifically, not within a function, which is where I want to.
Here is a fork of my code:
http://jsfiddle.net/grimertop90/77Z42/
Feel free to play around, and try drawing on the canvas.
(Note: I have been developing in Chrome and it works fine, but I just tried running it in Firefox and it seems to have issues. For my purposes, please just check it out in Chrome.)
If you look though the JavaScript, you should see three points marked "Case 1", "Case 2", and "Case 3". These are the three points in my code where I have attempted to grab the canvas's ImageData. Cases 1 and 3 work; Case 2, the important one, does not. Case 1 is during initialization. Case 3 is upon a user's button click. Case 2, the broken one, is fired when a certain number of points have been drawn on the canvas.
I have no clue what the issue might be, especially since it work in 2 out of 3 places.
Your code works fine, your only problem are the missing arguments in the arcSketch call. Currently you have:
if (points.length >= 100) { arcSketch(); }
Just change it for
if (points.length >= 100) { arcSketch(x,y); }
You were trying to call ctx.getImageData(Nan, Nan, 200, 200) which was throwing the error.
You can see it working here
I'm a AS3 developer but I'm not sure how can I trace this kind of messages in firebug as an info messsages.
I know that for an error I just need to inherit for an error but I'm not sure how can I trace this kind of messages.
This code:
trace("Hola")
will show "Hola" in Firebug, but I want the fancy Info icon at the beginning also the background of the line is blue.
Thanks for your help.
you can try https://addons.mozilla.org/en-US/firefox/addon/flashbug/
years ago I've used http://www.sephiroth.it/firefox/flashtracer/ not sure if anyone uses it still.
The trick is to use Debug version of flash player
In the case where you don't want to install the Flash Debug player (performance?), rather than using trace, route it to a Debug method that traces and logs to the console:
import flash.external.ExternalInterface;
var debug:Boolean = true;
function log(msg:String):void {
if ( debug ) {
trace(msg);
ExternalInterface.call('console.log',msg);
}
}
log('Hello World');
You should be able to throw that in a frame. If you're using class definitions, you'll have to interpret that code block as snippets.
Also note that in a browser that doesn't have console.log (like IE7) this will throw an error, so maybe you should test for console.log first and store the result in a global.
Notice the debug variable. When you want to turn debug logging off, just set debug to false. This is an overly simplified idea, but provides the basic concept.
Another way enhance this concept is to include a debug "window" if you will... really just a scrollable text box on top of everything else. This is helpful when dealing with devices that do not support logging, debug versions of flash or are just difficult to debug, e.g. mobile and AIR.