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
Related
I'm working on a new client's website that loads Javascript from a CDN so the Javascript is not embedded or inline with the webpage source. I would like to pause everytime getCurrentPosition() is executed in order to determine which external JS file it is contained in.
I realize I could use other tools to do a string search through the contents of the JS files but I would rather keep to Chrome's debugging tools.
Should I be trying to create a watch expression or is there another way to pin down when and where a certain JS function is fired?
You can search in all files using Chrome DevTools. Find your function and debug it:
Open DevTools (F12)
Go to sources tab
Open Search All Files by pressing ctrl + shift + f (Win) or cmd + option + f (Mac)
Search getCurrentPosition
Put a breakpoint (By clicking the line number at the left of the line)
Open Google Dev tools(F12)
Press Ctrl + p
In the opened box search for all files(JS, CSS, ...).
In the box you have 5 options:
At the first select a file for using options 2-5
Type 'filename' and select it.
Type ':linenumber' to go to specific line number(':10' go to line 10).
Type '#symbol' to go to specific symbol('#TestSymbol' go to TestSymbol symbol).
In this option, if you write #JSFunctionName or #CSSClassName then the cursor
will navigate to the JSFunctionName or the CSSClassName.
Type '!snippet' to go to specific snippet('!snippetTest' go to snippetTest snippet).
Type '>googleCommand' to go to specific command('>Clear console' clear the console).
You can find all the information that you need at the webpage: https://developer.chrome.com/devtools/docs/javascript-debugging
By simply putting it (copied from the webpage)
Open a site such as the Google Closure hovercard demo page or the TodoMVC
Open a site such as the Google Closure hovercard demo page or the TodoMVC Angular app
Open the DevTools window.
If it is not already selected, select Sources.
Debugging with breakpoints
A breakpoint is an intentional stopping or pausing place in a script. Use breakpoints in DevTools to debug JavaScript code, DOM updates, and network calls.
Add and remove breakpoints
In the Sources panel, open a JavaScript file for debugging. In the example below, we are debugging the todoCtrl.js file from the AngularJS version of TodoMVC.
Click the line gutter to set a breakpoint for that line of code. A blue tag will indicate if a breakpoint has been set:
With the above simple example you can actually "stop" the function getCurrentPosition() and debug it.
One way would be to replace the Geolocation.getCurrentPosition method with a wrapper function so that you can set a breakpoint inside it, and then examine the stack to see who is calling it.
If you know where in the code the method is called you can set breakpoints. This will pause the javascript execution during runtime and allow you get a stack trace.
I'm working on a new client's website that loads Javascript from a CDN so the Javascript is not embedded or inline with the webpage source. I would like to pause everytime getCurrentPosition() is executed in order to determine which external JS file it is contained in.
I realize I could use other tools to do a string search through the contents of the JS files but I would rather keep to Chrome's debugging tools.
Should I be trying to create a watch expression or is there another way to pin down when and where a certain JS function is fired?
You can search in all files using Chrome DevTools. Find your function and debug it:
Open DevTools (F12)
Go to sources tab
Open Search All Files by pressing ctrl + shift + f (Win) or cmd + option + f (Mac)
Search getCurrentPosition
Put a breakpoint (By clicking the line number at the left of the line)
Open Google Dev tools(F12)
Press Ctrl + p
In the opened box search for all files(JS, CSS, ...).
In the box you have 5 options:
At the first select a file for using options 2-5
Type 'filename' and select it.
Type ':linenumber' to go to specific line number(':10' go to line 10).
Type '#symbol' to go to specific symbol('#TestSymbol' go to TestSymbol symbol).
In this option, if you write #JSFunctionName or #CSSClassName then the cursor
will navigate to the JSFunctionName or the CSSClassName.
Type '!snippet' to go to specific snippet('!snippetTest' go to snippetTest snippet).
Type '>googleCommand' to go to specific command('>Clear console' clear the console).
You can find all the information that you need at the webpage: https://developer.chrome.com/devtools/docs/javascript-debugging
By simply putting it (copied from the webpage)
Open a site such as the Google Closure hovercard demo page or the TodoMVC
Open a site such as the Google Closure hovercard demo page or the TodoMVC Angular app
Open the DevTools window.
If it is not already selected, select Sources.
Debugging with breakpoints
A breakpoint is an intentional stopping or pausing place in a script. Use breakpoints in DevTools to debug JavaScript code, DOM updates, and network calls.
Add and remove breakpoints
In the Sources panel, open a JavaScript file for debugging. In the example below, we are debugging the todoCtrl.js file from the AngularJS version of TodoMVC.
Click the line gutter to set a breakpoint for that line of code. A blue tag will indicate if a breakpoint has been set:
With the above simple example you can actually "stop" the function getCurrentPosition() and debug it.
One way would be to replace the Geolocation.getCurrentPosition method with a wrapper function so that you can set a breakpoint inside it, and then examine the stack to see who is calling it.
If you know where in the code the method is called you can set breakpoints. This will pause the javascript execution during runtime and allow you get a stack trace.
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.
So I have an element that is dynamically added to the page with Javascript. After it is added, it is granted focus.
I want to examine the element in chrome dev tools, but the issue is that it has a onblur event handler that removes it from the DOM. So basically when I click on the dev tools to select the element, it is removed. An example can be seen here:
http://jsfiddle.net/MSZEx/
HTML:
<div id="container">
<button id="the_button">Click me to show field</button>
</div>
Javascript:
$("#the_button").click(function() {
$elt = $("<input>").attr("type", "text").attr("id", "text_field");
$("#container").append($elt);
$elt.focus();
$elt.blur(function() {
$elt.remove();
});
});
In the example I would like to be able to examine the input element that shows up once the button is clicked.
All of these answers didn't really work for me.
At the time of writing (Chrome 92) you can use the Rendering settings in Chrome Dev Tools:
Open Chrome Dev Tools > Click the kebab menu > More tools dropdown > Rendering > Check emulate a focused page
This keeps the focus enabled whilst playing around in Chrome Dev Tools 🎉
Edit: 23/03/2022 - this is still the case in Chrome 99
I got it working by right clicking the parent node in the tree without focus & then
-> Break on... -> Subtree Modifications
Note that a page refresh doesn't clear this out, so might have to close & reopen the inspector if you have forgotten where you put your break point
Rightclick the node in the element tree -> Break on... -> Node Removal.
The debugger will now break before the node gets removed.
The trick I like to use is
Open up the sources panel
Display the tooltip
Use the keyboard shortcut to pause script execution. (Hover over the pause icon to find out the keyboard shortcut)
When the script execution is paused, go back to the Elements panel and inspect the tooltip as you are used to
Another way is to open Chrome dev tools, focus the element in question in the browser viewport and then hit F8 which will stop all JS from running (without losing focus), leaving the element even after it loses focus till you enable JS again. This way you can inspect the element in the DOM tree and proceed from there.
Enable JS by hitting F8 again.
How about you just simulate the click from the console?
Open your f12 tools on the website, get the elements id and do your own $("#the_button").click(). The console will keep the focus so your element won't blur. You can then go to the elements tab and look at the css.
"but what if my Javascript was very very long, and it was minified" <- In this case, you could try this (use F12 to trigger):
$(window).keydown(function(e) { if (e.keyCode == 123) debugger; });
// Or in vanilla JS:
window.addEventListener('keydown', e => { if (e.keyCode == 123) debugger; })
in this fiddle
As suggested by this SU question
I don't know if it works in chrome, but it does in Firefox when you already have a console open.
According to the
Chrome DevTools Keyboard Shortcuts page, Ctrl+Shift+C toggles Inspect Element Mode, which allows you to hover over the element without it disappearing, and this will sync with the Elements view in the DevTools. However, as soon as you click on the element, it will still disappear.
You can combine this with the other answers to break immediately (using F8 or Ctrl+</kbd> to pause script execution) or on modification of the element/subtree (which should now be shown in the Elements view).
In Firefox this does not work, but you can still use the trick with setting a breakpoint (Debugger -> Event Listener Breakpoints -> blur). You can then select the element while the page is paused.
If putting a break-point is an acceptable solution for you (which it seems to be according to comments) then you can add a debugger; statement to automatically halt execution. For more information check https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger
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.