I want to debug javascript and see a console at the same time (something like having two separate windows). I can not find a way to do this: either a debugger or a console.
Yes. There is an button that looks like >= in the top right of the developer tools
When you click on that it opens a drawer that allows you to run console commands
Update for 2017
The icon has been removed and is now available through the dropdown menu (which also helpfully shows the keyboard shortcut: Esc)
Press escape while in the debugger to open the console.
You may also open up the console to experiment while paused. Hit the [Esc] key to bring the console into view.
Related
I have a html which has an input box. I want to use the keyboard to enter some text in the input box and in the debugger I want to see input box's value.
but when I run the debugger with "ctrl+r" , the web page become inactive, so I can't enter.
how can I do that?
To debug, you need to use browser Console window.
To activate console window in chrome, here are few options
Press F12
Right click on your page and choose Inspect option
Press ctrl + shift + i
You will get a develper window, Here choose the console tab.
Once you are here you can write your Javscript/ Jquery (if library is loaded) and debug the values.
To debug Functions or event handlers
Add this keyword debugger; in any line from where you want to debug, Then open up the developer window and then do the activity which will trigger the function execution, The Sources window will stop right at the line where it hits debugger; and from there you can use F10,F11 etc keys to debug.
Look for these options
ctrl + r is for refresh the page , not the debugger.
for debug you need to do one from two options:
1) insert in your code "debbuger;" in the line that you want to stop there
2) put a break point using the chrome developer tools
attach for you link that will help you with all that :
https://developers.google.com/web/tools/chrome-devtools/?utm_source=dcc&utm_medium=redirect&utm_campaign=2016q3
Is there a way to debug the page with browser console or firebug to know how many times
a specific Javascript function is called while loading the page ?
As #SamGreenhalgh pointed out, in Google Chrome, you can simply open the Developer Tools ([Ctrl]+[Shift]+J), find your script in Sources tab, and add
console.count('some label');
right into the body of the function you wish to observe. This will print out
some label: {N}
into the console each time console.count is called at that point with that label (see documentation).
You can set a breakpoint on the function, reload the page, and count how many times you have to press the Continue button.
In the dev tools of most browsers (and in Firebug), you'd do that something like this:
Go to the page
Open the dev tools (via menus, or press F12 on most browsers, etc.)
Navigate to the "Source" pane (the name varies, but it's usually something like that)
Find the function in the scripts. (Chrome's dev tools have a great feature: Ctrl+Shift+F does a search through all loaded scripts.)
Click the gutter to the left of the function to set a breakpoint
Then reload and count. I'm not aware of an automated way to do it.
Trying to debug a problem that's IE-11 specific, I would like to see the console messages logged when a certain control is clicked. But the control refreshes the page, which makes F12 tools automatically clear the console, so whatever is logged just before that, I don't get to see!
Past versions of IE had an option to keep the console contents on navigation. Is this option available in IE11? If so, where is it? If not, is there some other way to view the console that doesn't immediately discard the message I want to see?
In with the latest F12 update to IE11 (that came as part of the Win8.1 Update) there is now a button to disable "Clear on Navigate"
Additionally, you can enable IE to record messages in the Console at all times instead of only when the Console is open.
For all the changes to the IE11 F12 dev tools see: http://support.microsoft.com/kb/2929437
Ran into this and I didn't find a good solution, but I found a hacked one that worked well enough for me to debug.
Use window.onbeforeunload to pop up a window so you can at least see the values before they are purged.
See: Prompting and preventing user from navigating away/closing a page
If I put the debugger statement in my JavaScript source with the Chrome devtools open, it'll stop execution so I can interactively explore the current context from the console. It's really awesome.
But unfortunately it will also switch to the Sources tab and display the line where the debugger statement happened. Most of the time, I want to type JavaScript commands, so I have to manually switch back to the Console tab.
Can I avoid the tab-switching and stay in the Console tab?
Or am I using it wrong?
Right-click on the source-tab and select 'move to bottom'.
Looks like Chrome added a preference for this in the intervening 9 years: https://stackoverflow.com/a/69216922/66673
Quoting that answer:
I had the same issue and it was driving me nuts! The way I managed it to stop switching was to go to into the DevTools settings -> Preferences.
Under Sources options, uncheck Focus Sources panel when triggering a breakpoint.
There's a reason for that - and is that whenever the code has stopped, because of a breakpoint or a debugger statement, you'd usually want to actually see where the execution has stopped. So, the developer tools switches to the Scripts/Sources tab, and this is a common behaviour among the major browsers, that may also show the local variables, the call stack and so on.
The best thing you can do is to keep the console frame always open, so you're ready to work. Just press Esc or click on the second icon on the lower left corner. That's what I usually do.
Switch to the Console tab when you expect to get a large response from the command you type.
Is there anyway that I could trace/see the exact order that a website is processed across html, css and javascript?
I have a function that is not firing off on the first pass and I'm pretty sure it has to do with the order of execution.
but also, it would be very informative to see the individual steps as they are processed (slowly)
Thanks for any advice.
this is in relation to this question:
flashMovie.Play is not a function
It sounds as if you want to set up breakpoints in your code, and then step through the execution path.
Click on the Wrench symbol on the top right of the Chrome screen, select Tools, and select Developer Tools
Click on the Scripts tab on the bottom pane of the Chrome Screen
Click on Folders on the top left corner of the bottom pane of the Chrome Screen
Click on the script that you want to debug
Click on the line that want to setup the breakpoint
The Chrome Developer Tools official documentation is also available here: https://developers.google.com/chrome-developer-tools/docs/scripts
Once you have hit the desired breakpoint (which could just be the first line of the script), the click on the "Step into next function call" (it looks like a down arrow pointing to a dot) button on the top right section of the bottom pane of the Chrome screen.
These questions should help as well:
How to step through code in Google chrome javascript debugger
How to set breakpoints in inline Javascript in Google Chrome?
Javascript breakpoints not working in Chrome Developer Tools
Set a breakpoint in XHR in Chrome
In Chrome, use the Developer Tool Bar. Press the Keyboard Key: F12.
Place an alert(1); or console.log(2) in your JS and see what happens. If you use Firefox start with opening its web console and look if you get any errors there. Ctrl+Shift-K to open the Web Console.
Press F12 OR Ctrl+Shift-K for developer tools, it works almost in any browser. you will be debug your code and use consol