I have a complicated mess of code (built by a team of 7 over the course of several years) that incorporates multiple libraries - jQuery and angularjs, specifically.
I know that the value of a variable changes when I click a certain radio button, but I have no idea what is running when that happens to cause the variable to change. I've tried console.log in every place I can think of, but am somehow still missing the action that's changing the variable.
I know how to debug with Firebug if I know where to place my breakpoint, but in this case, I don't. Is there any way to tell Firebug to start debugging at the line that executes immediately after the radio button is clicked? In other words, when I click the radio button, open Firebug's Script panel to the first line in order of execution, wherever that line may be.
If you have chrome you can right click on the checkbox -> inspect element -> event listeners
Is there any way to tell Firebug to start debugging at the line that
executes immediately after the radio button is clicked?
Yes, this feature is called Break On Next.
Note that Firebug has much more features to debug your scripts besides setting breakpoints within the Script panel. These features are described in the 'Script Debugging' page inside the Firebug wiki.
Furthermore the Watch side panel allows you to inspect the variable to see, at which step it is changed.
Related
So, as a web developer veteran (but a total, complete 3D noob) I'm impressed by what I can do with my models in the three.js editor
I see I can "rewind" my actions in the editor by clicking on the commands listed in the History panel..
Is there an easy way to see the actual javascript that lies underneath these command buttons (similar to the way you can copy your recent commands from the Log panel in Clara.IO's editing platform)?
You can try setting up breakpoints around the DOM elements in the history pane. What I tried is open Developer Pane in Chrome, click sources pane, and set up an event listener event breakpoint for mouse click.
Now if you click an item in history pane, you will be brought to stop on the function onClick in ui.three.js. You can step in to examine the JS code it is about to execute.
Hope that helps.
I can't seem to set a conditional breakpoint in Firebug. Every Google search I've done indicates that I should be able to Right-click the line of code in question, at which point a "bubble" will appear asking me for the condition on which the break should be executed. Right clicking does in fact toggle the breakpoint's existence, but no bubble appears. How/where do I enter my condition?
Of course Mac mouses don't have a "right-click" button but assumed I could simulate right-click using Control. I've also tried Alt and Command to no avail.
I am running on Mac/Yosemite.
Thanks.
To be precise you need to right-click the breakpoint column or right-click inside the line and then choose Edit Breakpoint Condition... from the context menu. If you do so the condition editor should appear, which looks like this on Windows (on Mac it's black):
There is currently (Firebug 2.0.x) no keyboard shortcut for this action, so right-clicking is not working for you, it might be a bug in Firebug. In that case you should go through the steps described at Firebug's first aid page and file a bug if the steps don't help you.
let me put it simple.
With Firefox 29,
I add a check box control next to the back & forward button in the toolbar "nav-bar".
It works. I mean I can do check and uncheck, and the javascript code will be triggered.
Now, my problem: after I checked the checkbox in one tab, I found that the checkbox in all other tabs are also checked, and if I uncheck any of them, the checkbox in all other tabs will be unchecked.
Why they change as one? I would like them to be unrelated or separated. In another word, I want the control (checkbox or button or label etc) to be tab-specific.
All suggestions are appreciated.
I'm not really sure how to best word this, but let's say I'm on a web page and when I click a certain button, something undesirable happens. Like a whole bunch of content disappears. Is there a way in the Firefox debugging tools where I can insert a watch on that button so when I click it, the debugger will pause the JS execution and show me exactly where in the code it's executing the stuff I don't want?
(note: obviously this is code I did not write, otherwise I'd know where to look to fix the problem)
Yes, in the debugger there is an events pane, and you can break when a specific event is triggered. The documentation is here:
https://developer.mozilla.org/en-US/docs/Tools/Debugger#events-pane
Firefox has a good built-in profiler - you can click the start profile, and click it again to end, and see what parts of the code are running the most.
This is really helpful in finding performance problems too.
I have just started using codeblocks and have set up my UI to have the watches window in the bottom right of UI. I set my break point and run my program in debug mode. I can step through the lines of code with the buttons on my menu toolbar but there are no variables showing in my watches window. I read somewhere that you can right click and add global variables, but I also don't have that functionality. All I have in my watches window is a button that when I click a message pops up reading:
"Click the button to see the value. Hold ctrl to see the raw output string returned by the debugger. Hold shift to see the debugging representation of the CBWatch object."
This button doesn't even seem to do anything either though.
How do I get varibles to display?
When you run the debug mode (the one activated by the red play button). The application will execute as usually until it finds a breakpoint. After that breakpoint you must click the 'step forward' buttons. If you want to 'watch' the behaviour of variables, then you should click on the 'Debuggin window' button (the one with a bug which is near to the 'stop debugger')
Then activate the 'watches' and a new window will appear. In this window you can even add specific variables you want to track.
I am assuming you can see the watches window already.
All you need to do is type the variable name in the grid(inside the window).Only the variable name, the rest(data type etc) is automatically detected.
Go to Debug -> Debugging windows -> Watches