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.
Related
This person somehow got the developer console to show below the output pane at jsfiddle. (see http://jsfiddle.net/5ep1fwyL/) However, no matter how many different ways I ask (in Google or other places) I can't seem to get a good straight answer.
Can someone tell me how its done or point me to the doc that explains it?
<div class="colors">Red</div>
In the JS Fiddle Javascript view, you will notice a cog icon, click this.
You will then be presented with a bunch of options, in the checkbox list under Frameworks, you will see FireBug Lite, enable this and press the Run button.
You should now see the FireBug console window.
I'm sure this must be a burden to other people too...
Say I am debugging a website, and there is an element on the site that when clicked calls a particular function; for example:
<img src="foo.png" onclick="javascript:Bar();" />
But I have no idea where Bar is declared in terms of the file structure. It could be coming from an external source or could be in the website solution.
Are there any tools that can be added into the browser (i.e. a FireFox extension) that can assist with this?
I'd sort of like something that when I click something that fires some javascript, breaks the execution and shows me where the execution was going to occur
You can use Firebug (FF add-on)
Open Firebug (press F12), Open Script tab and use search field.
In chrome (> v 15) developer tools you can search all sources.
Press F12, make sure the console is shown, then on the tab bar next to console is search, go into that tab, type in function Bar and hit return. Or after pressing F12 press Shift Ctrl F (Command option F on Mac)
There are a few caveats on this , e.g. i dont think this will find scripts inside iframes
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.
When I have DevTools open, there is a little button that toggles Hide Drawer. and Show Console.. Besides being inconsistently named, the 'drawer' is very annoying to me because it takes up so much of the little screen real estate allotted for devtools (i'm bottom docked). How can I keep this 'drawer' closed permanently? Or if I can't do that, can I at least keep the height of it as low as possible? (it returns to a default height every time I open it)
At least you can press ESC to toggle the console area hide and show.
None of the previous answers worked for me. All of my emulation tab options are cleared/reset. I'm not sure if it's new but it turns out that there is a "Toggle emulation" button on the left side, next to the search icon. Mine was blue so I clicked on it to make it non-blue. Screenshot is below. Now, all is happy. That was so frustrating!
I solved same problem removing the flag from "Spoof user agent" option under the "Emulation" tab (I don't even know why it was flagged!).
Apparently there is a show / hide console button next to the setting button.
info and screenshot here - https://developers.google.com/chrome-developer-tools/docs/console#opening_the_console
My problem was that the Console was enabled in the chrome menu, you can turn it off by clicking on the Console option in the dev tools settings:
THIS SOLUTION NO LONGER WORKS WITH NEW CHROME VERSIONS. THE ICON WAS REMOVED.
The working solution was pasted above by Sigma. Pressing the ESC key will toggle the visibility of the panel.
I notice the majority of these answers are over a year old. I had a similiar issue and it's August 2015.
I was overlooking a simple icon: The >_ next to the gear.
You can see the video of the window being shown and hidden to confirm this is the same issue:
http://www.youtube.com/watch?v=QOC863BxZNM&hd=1
When the "drawer" is open look into the "emulation" tab, then click on "reset." Close dev tool (F12) and then reopen it (F12). The "drawer" is hidden by default.
My Chrome Version: 32.0.1700.77
The response of Darko works, I propose another way to solve this problem.
I hope this helps someone.
click Restore Defaults and Reload in Dev tools Setting right bottom
my chrome version is 37
in my case reset in emulation does not worked although i had tried it recently and it was the root cause
It is because Spoof User Agent is enabled in your Emulation-tab in the drawer.
Deselect the options below
I had the same problem, and also a frame around the page with pixels lenght of page (kind of rulers if you use PSD) with options for device width. I've solved clicking on restore default options. Hope can help someone.
I had to uncheck that box shown in circle in the newest chrome version (38.*).
In latest chrome there is a "Show What's New after each update" setting (preferences->appearance). Once you untick it, the console finally won't pop up anymore.
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.