I am trying to do a simple JS exercise using localStorage to store some values; when I try to inspect these values using Chrome devtools I can't see the keys
Is there any setting so that I can see it with every key?
Edit:
I am trying to set this value using
localStorage.setItem('Try', 'This is a try');
console.log(localStorage.getItem('Try'));
and the "This is a try" is correctly logged in the console.
Your window showing the value seems to be moved all the way up
hover the mouse on the line between the "This is a try" and "Key", click and drag down.
you should see the covered screen then
I fixed this by clicking the button Chrome Developer Tools > Settings > Preferences > Restore defaults and reload
Related
I am working on a tool that has its own debugger. I can select it from the drop-down option in the javascript context in the Chrome console window as shown in the following image.
So, every time I refresh the chrome page, this option resets to "top". For every tiniest change, I have to manually select the debugger from the drop-down option.
Is there any way to change the order in the dropdown menu or if I can save my chrome console setting so that my debugger will be on top instead of the "top" option?
I tried to search any shortcuts of moving up-down in the dropdown menu but found nothing. Any suggestion to minimize my manual work would be highly helpful.
How do I view all JS objects that I created in chrome? I know if I type window into the console, I will see everything, but where is the tab that is filled with all my things?
I think you might be looking for something like Chrome Breakpoints. Basically, in the developer tools, you will go to 'sources', click the file you are wanting to debug, and set a breakpoint on the line in the file that you want to see your active variables. You do this by simply clicking on the line number. When you reload, the browser will pause execution on this line and you will be able to see all the information you are looking for.
For some reason my Google Chrome console has changed to my usual preference and I'm unable to figure out why.
Would anyone know why I can no longer just see my console.logs();?
This is what I'm currently seeing, the only option that will bring up logs is the Verbose option, but of course I am getting an overwhelming amount of messages in the verbose option of console logs.
Even the official documentation shows the console differently:
https://developers.google.com/web/tools/chrome-devtools/console/
From the Developer Tools window, hit your F1 key. That should bring up Settings > Preferences. At the bottom right of that window click the button 'Restore defaults and reload.'
Just go to console in the browser and at the top have gear Icon click on and there at the very bottom you find "Restore defaults and reload" just have a hit on it there you go.
Is it possible to save out the javascript console in Safari Web Inspector to a file? I can't find any way to do it, and the only way to select all is to drag with the cursor (very difficult when I have a long continuous stream of log output).
I figured something out:
While holding down SHIFT, select the start of the part you want. Then release SHIFT and scroll down with the scrollbar.
Shift-click again on the end of the selection. Then you can copy/paste as needed.
Click inside the console, ⌘s. There is no step 3.
Note that this saves the output in plain text so there's no colorization, highlighted fields, etc.
I can just use select all context menu after I clicked the gear icon to right of console tab in developer tools then unchecked "Wrap lines to editor width"
With this checked I could only copy first line, unchecked I could select all and copy/paste into a text file.
I'm trying to debug a JavaScript onFocus event attached to a bunch of text boxes on a page. The bug occurs when selecting a text box and then tabbing to the next text box. I'm trying to debug this by placing a break point in the onFocus event using the Chrome Developer Tools. The problem I'm facing is that when I select a text box and the break point is caught, Chrome Developer Tools steals focus and does not return it, so I can't tab to the next text box. Anyone have an idea for a work around? I guess I can resort to alert statements to print all of the information I need without using Chrome Developer Tools......
Chrome Dev Tools includes a Play/Pause button both in the Inspector and as an overlay to the webpage. Using the overlay prevents focus from landing on the Inspector.
Also, I've found the following type of logging solution to be easier to track than the interval method (thanks to less redundancy and the ability to pick up on changes that occur more rapidly than the interval):
$('*').on('focus blur', function(event) {console.log(event.type + " to:"); console.log(document.activeElement);});
One option for debugging tricky cases is to set an interval to poll the focus in the console.
setInterval(function() {console.log($(':focus')); }, 1000);
Type this in the console (update it to include whatever details you are interested in), hit enter, and then keep the console where you can see it while you do stuff in your UI.
*MDN docs for setInerval()
You are right, Chrome DevTools receive focus and do not restore it when you switch back to the debugged page. Feel free to file a bug at http://new.crbug.com (make sure you start the summary with "DevTools: " so that the bug can be assigned to the appropriate team as quickly as possible.)
On a side note, console.log() is a slightly better alternative to alert() as it allows formatted output.
There's a checkbox in the Rendering tool of Chrome DevTools labelled "Emulate a focused page". This prevents the webpage from getting blur events when you click on DevTools or other windows.