When I refresh my page with firebug loaded, it pauses in Firebug with the following screen shown :
What is causing this, as it will not allow me to interact further with my site until I close Firebug? Is there a bug in my code?
Looks like you have a breakpoint set on that line or possibly an error and break on all errors is turned on.
Go to breakpoints tab and remove all the break points and also set break on all errors to off.
Related
Is there anyway to prevent changes to web pages such as a live chat or a video feed? Im guessing its a javascript that times out the webpage and then exits it or prevents further entry.
I saw this question: Freeze screen in chrome debugger / DevTools panel for popover inspection?
What I did was I inspected the element, then went to the line of code and then clicked on :hover but the script still executed and locked me out. Any other ways you can think of to prevent changes being made to a page?
Chrome allows you to disable JavaScript on certain pages, to do so click on the globe of the URL bar and it will show some permission options for the site you are. There disable JavaScript.
How to deliberately freeze javascript in chrome (plugin/console)
Found another solution in the link above:
Open Chrome javascript console
Go to "sources"
On the right side, click the little "pause" icon, or press F8 to pause script execution.
This is probably a dumb question, but while debugging JavaScript files with breakpoints in Chrome Dev Tools, I notice that when an error occurs, the message just flashes in red and I have no idea what it is saying. So for example, when I'm stepping through a function and I encounter a line where the function fails, a red error message displays but flashes so quickly that I can't read it. Is there a setting that I can change to fix this? Or an area where it logs my errors?
Here is a picture of the errors I'm talking about: they just flash and disappear.
Thanks!
There is a little checkbox on the console tab called 'Preserve log'. When checked, it will prevent the flashing error problem without having to add additional code to prevent the page reloading.
There should be a small red icon near the top right corner of the developer tools. Click that and it should show you a list of all the errors. Alternatively, just go to the Console section.
For example, if there is a slideshow moving along, I can see the HTML changing live in Firebug's HTML tab.
The Console tab only shows things that are console.log()-ged to it, or if there is an error. I would like to see confirmation that each line of the Javascript is getting executed - as well as any output/values that are returned/generated as that happens. Like a little cursor on the left going down line by line as it executes - and stopping as soon as error is encountered?
Use breaking points and debugging in console. You can open your script in firebug and choose lines where you can add breakpoints. Then, you can run your script and see in panel on the right a lot of stuff.
I would like to know how I can use a debugger (Firebug or IE's F12 tools) to trace step by step the code I am receiving from a webpage once I POST.
My problem is that I fill out a form, and after POSTing the form, I get a response that has some redirects and other stuff apparently happening there. I would like to know how can I simply halt execution upon POST and go step by step on the javascript code that is happening, and see exactly how the redirects are formed.
The thing is I cannot place any breakpoints because I don't have the page's response before I even POST it...
I hope I was clear enough about my issue.
Thanks in advance.
You can add a debugger; statement as the first line of your JavaScript code, which launches a debugger if one is registered.
Therefore, all you need to do is ensure Firebug is launched before the page is loaded, and the JavaScript execution should be halted to allow you to step through the program.
Another (hacky) way you could do this is to place an alert() or similar as the first line; an alert() blocks the program flow until the prompt is closed. Without closing the alert, you could place a breakpoint on the next line of executable code after the alert(), then OK the alert, and then debug away.
Assuming you have IE9 installed:
Press F12.
Click on the network tab
Click "Start capturing"
Execute your script
You will see all the responses and redirecs there.
I'm currently moving a website from self hosted onto a CMS system. The current site uses a modal popup script called SqueezeBox.js
I've copied the code across exactly how it looks on the current website, however the modal popup box isn't triggering when I click on a thumbnail image.
Looking at the code in the header I've spotted that the CMS I'm using is also calling a number of other javascript files and I'm wondering if one of them is causing a conflict.
What's the best way to find out if this is the case? I've tried Firefox's plugin Web Developer but can't see anything in the Error Console. However I'm not 100% sure I'm using it correctly. Can anyone else point me in the direction of a simple to use javascript conflict detector?
Cheers
Adam
If you have Google Chrome, open up the Developer Tools and you can go into the 'scripts' tab, open up your javascript files and look for the click handler.. click along the side of the code to set a breakpoint, then when the code reaches that spot (if you click it, for example), it will pause, and then in the Developer Tools you can see what functions are being called where as you step through the code. You can also hover over any variable in the code window to see its value. Very handy! You can then see if it's getting into your plugin at all (you can do this as well by setting a breakpoint inside the plugin at a place like the first line that will always be accessed when its run).
I believe you can do the same thing with Firebug
It's a bit of a different thinking process to get into (step into, step over, turning breakpoints on and off etc) but it's extremely useful.
A more simple way of checking where problems are occuring is by adding an alert('im working); or something similar to code you're not sure if it's working. You can also alert a variable to see what the value is at that point. You can also use console command to print it to firebug's console. These are doing things that breakpoints/debugging do for you except with the debugging you don't need to change your code.
If there is a javascript error, then the easies way is using firebug or the Chrome Inspector (right click on the thumbnail and choose "Inspect element"). Open the console tab of either and refresh the page. If there is an error, it will be reported in the console and provide a link to the relevant line.
If there is no error being reported, then the code's logic is preventing the box from being displayed. You'll need to step through the code to find the error. Look at what function is being called from the click handler of the thumbnail image. Go to that function in either tool and place a breakpoint on the first line of the function. Click the thumbnail again and the code will pause on that line. From there you can step through the code and see which code branch is followed. There's likely a sanity check at some point that fails and causes the code to bomb out.