Develop Reference

Developer Tools in Google Chrome not showing

I'm just moved to windows 10.
And have latest version of Google Chrome on it.
But whenever I tried to access developer’s tool it shows nothing.
I have tried,
1) Right Click + Inspect element.
2) F12.
3) Right corner tab on Google chrome + more tools + developers tool.
But none of them working.
Please help.....
I don't know what is missing.

I had the same issue but in my scenario I was on a Virtual Machine with some complex display settings. The procedure here worked for me in other contexts:
You should see the process in the Windows bar on the bottom of your screen.
When you click on it, nothing is shown.
Bring back in the viewport
If the conditions above apply, then the window is simply displayed out of the display viewport. TO bring it back, do the following:
Make sure you have selected the window in the Windows bar.
Hit ALT + SPACE to show the menu
Select "Maximize".
The window should appear in one of your monitors.
Drag it around and resize it.

You should try also Ctrl+Shift+I for windows as written on the following doc
https://developers.google.com/web/tools/chrome-devtools/

I fixed this of this way
Open chrome dev tools
using the chrome page that you need debug press Win + "<" (left arrow)
windows ask you which window you want to the right and select chrome dev tool icon, but click should be in the icon instead of the rectangle of the windows

Just had the same problem. The window is apparently minimized.
On windows, hold the mouse on the chrome icon in the taskbar, when the thumb shows up, right click on it and select maximize window.

First thing i would try is closing all processes and restarting Chrome and if that doesn't work i would uninstall and reinstall chrome
I know this isn't really an answer but hope it might help
Goodluck!

Chrome -> Setting -> Extensions (Side Menu) -> Turn on Developer Mode

Had the same issue, The thing is just minimized. Hover over the side of the options at the bottom and drag to top and you will see the options.
see following image and hover over ht area highlighted in yellow

Your dev-tool might be on your second monitor, which you are not looking at but connect with your PC.

Disclaimer: Please try this at your own risk, I'm not fully aware of its consequences. It apparently clears chrome's local storage for all websites
All the solutions I saw didn't work for me, but this one did:
I deleted this folder:
// AppData\Local\Google\Chrome\User Data\Default\Local Storage\leveldb

Chrome Extension to debug and edit code in the browser

I am building a web based JS REPL (similar to http://jsfiddle.net/), but I find it really annoying to have to switch between the Chrome Developer Console and my own code to debug. I have a text area on the left (using the wonderful Ace Editor) and clicking a preview button loads another window into an iframe on the right with the code I was editing. It made me wonder, what if I was able to add breakpoints to my code editor in the browser window and when it hits the breakpoint I could see the state of variables, step through the code, and remove breakpoints all while still editing the code in the editor. Very similar to real debugging, but in the browser instead of an editor like Eclipse.
I think a Chrome Extension is the right way to go. I can make calls to the debugger using the debugger API, then add breakpoints, step over, step out, etc. using this protocol. This works great and I can even get the current state of variables when the breakpoint is hit using Runtime.getProperties.
The problem is... that once I pause the code to debug, everything on the entire page freezes (of course, because I'm debugging). Can anyone think of a way to get around this? The ideal solution would allow me to freeze and debug the result on the right in the iframe and still manipulate the code on the left.

Firebug Lite on Chrome causes Footer Issue, is there a fix?

I'm a Chrome user and would be lost without Firebug, but one issue has always annoyed me. Namely, the fact that the Firebug console doesn't appear below the site you're viewing (ie the way it behaves in Firefox). Instead, the console sits above the site, obscuring the footer and content. It's a little thing but annoying all the same.
I understand that this is because of the way Google restricts Chrome extensions but is there a way around this particular issue?

I haven't found a solution anywhere. So, with some help from other stack overflow threads, I came up with a very simple function and as I couldn't find much about this, I thought I'd post it here for anyone with the issue.
I'm not a JavaScript programmer, but I do use jQuery. As such, I run this inside jQuery's ready method. Once the site has loaded, it'll check to see if Fire bug is open, if so, it simply adds a 400px bottom margin to the body. Obviously, if your console is bigger/small than that, just change the size inside the jQuery code.
It won't however change anything if you open the site and then open Firebug. It's nothing major, just open Firebug then refresh the page an it'll work.
// add body margin if firebug is open
if (console.log.toString().indexOf('apply') != -1 && navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
$('body').css('margin-bottom', '400px');
}
Hopefully this will be of use to somebody.
EDIT:
WARNING: This can possibly cause your jQuery to stop working in Internet Explorer. So, just remove this if you find that your jQuery doesn't work.

Instead of modifying your webpage's CSS code which may have adverse effects, you should just detach Firebug Lite in Chrome, then position that popup window under the resized Chrome browser window.
To perform this, just press the center button in the Firebug Lite window located at the top right corner.
Right-click the image below and view in full size if that helps:
Open Image in New Tab / View Image
This way, you'll have two separate areas that don't overlap yet play nicely together.
Per Stan's comment above... about what does Firebug Lite provide extra when compared to native Chrome's Developer Tools, I would have to say it provides familiarity and a great DOM Tab that Chrome lacks.
More importantly thought, you can actually use BOTH consoles at the same time.
This allows easier monitoring of two different panes and with a multi-monitor setup this can be a useful scenario. Even with a large monitor things look good.
Right-click the image below and view in full size if that helps:
Open Image in New Tab / View Image

Chrome devtools: Drop into debugger without switching to Sources tab

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.

IE8 javascript debugger is now broken

I am on Windows 7, using IE8 and Visual Studio 2005. I have been enjoying the built in javascript debugger in IE8 for several months. About 2 weeks ago, I installed some security update for IE 8 (possibly KB978207) and all of a sudden the javascript debugger is now broken.
If I get a warning from IE 8 that an error occurred and asking if I want to debug using the built in debugger, if I hit yes, I get a grey popup in the top left corner (which I've never seen before) saying "JScript Debugger. Breaking on JScript runtime error - Object doesn't support this property or method". Then nothing happens. IE freezes up and then I get a Windows popup saying that IE 8 is no longer responding and asking if I want to end this process. If I try to end the process, nothing happens and I continue to get the grey popup. I usually have to kill debugging process from VS 2005, but the frozen IE8 still is present. It's not until later when the OS, finally cleans up the process that it will go away...
Edit (new info):
I tried removing the lastest security update and a silverlight update that came around the same time, but Windows automatically reinstalled them....
I then tried removing IE 8, and then adding it back to my system to reset anything related to IE8. This did not have any effect.
After reinstalling IE8, I did notice that, when I first tried to open the developer tools window by hitting F12 from a regular IE 8 window, I never saw anything, but I could see the developer tools title in the task manager list. I had to right click on the task and maximize the window, so I could actually see the developer tools window. Apparently this is a bug mentioned here: http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/79b8ee54-c5f6-4467-ba6d-27491c95cd13
I've realized that the window will maximize if the iexplorer.exe process is not the debugged process launched from VS2005.
The grey popup I mentioned in my original post is from the developer tools window iexplorer.exe process.
If I launch my app from VS2005 and then hit F12, I see that the developer tools window is opened (I can see that window is opened under the IE icon in my taskbar), but it is not shown. If I try to maximize it from the task manager, this has no effect.
So basically, the developer tools window is freezing up when it tries to open under my debugged iexplorer.exe process launched from VS2005. The OS then asks if I want to kill the process since it's not responding, but it is unable to kill it. At some later point, the zombie iexplorer.exe process is killed succesfully (by the OS I presume).

Had the same thing happening. You clued me in on the solution by pointing out F12 starts Developer Tools in the taskbar but doesn't show up on the screen. Apparently the window is off screen in nowhere land and causes major screwups if you attempt to debug in this state. So my solution was to:
Close all IE instances
Start up IE
Start up Developer Tools (F12)
Hover cursor over the the IE button on the taskbar until context menu shows
Right-click the Developer Tools item in the context menu (not the taskbar button)
Click "Move"
Start tapping arrows until you see the window come back in view. Mine was off stage left so I had to hold down the right arrow.
The window will have been sized down to just a window title bar, so resize by dragging the right corner down and out.
Once the window is moved back and resized, close it to "set" the position. You should be good to go now.

May be the security patch has disabled script debugging in IE. It was a common problem when using the debugger of VS 200X

Now on try to enjoy FireFox with the FireBug Addon. It's really great to debug Javascript. :)