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
Related
If you enter a command in Chrome Dev tools (which could be one big block of code) and hit enter, is there a way to "undo" changes made to the DOM? Or do you simply have to refresh the page?
I too was looking for an answer to this question beyond "refresh the page"... Stumbled across this solution:
Enter Chrome dev tools (CMD + Shift + I on Mac)
Click the three dots aligned vertically to get the settings menu
Hover over "More Tools" then go to "Changes"
On the changes window you can see all the changes made during your current DOM editing session - to revert them all, simply click the
undo arrow in the bottom left...
See the visual below
Reset all changes made in Chrome dev tools
Depends on what that code actually does. For example if you change something in the style (css) or structure (html), if you refresh it will show the original page. But if that code changes a cookie value, refreshing is not enough, or even closing the browser and opening again.
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
I'm creating a website for a kiosk, and I need to make the bar that shows the page address you are about to go to at the bottom of Firefox or IE disappear. Please see the image.
Is it possible to make this bar disappear?
EDIT:
Thanks to everyone's reply. I have tried the code Chris and Mrtsherman suggested, I'm not sure I missed something unfortunately none of it worked for me. Is it really not possible to hide the status bar for Firefox in the kiosk mode?
The problem I'm having is that I've got three divs on one page, so it goes like a photoslide when each div is clicked, the first div is an a tag entirely so the status bar is showing all the time. If making the status bar disappear not possible, is there any way I can set the cursor off the screen so that the status bar doesn't show all the time on the first div? Thanks a lot.
If you'd like to use Internet Explorer, just create a shortcut in the client's startup folder that points to iexplore -k http://example.com. This will start IE in Kiosk Mode at the designated page, as soon as the kiosk machine starts.
Alernately, you could have the first page open a pop-up with code like this:
window.open(filename,"","width="+winwidth+",height="+winheight+",scrollbars=yes ,menubar=no,location=no,left=0,top=0")
to open a window with no UI chrome.
Option 3:
Try this, not sure if it will work. In firefox you can enable an option to allow the status text to be changed via javascript:
Tools -> Preferences -> Content -> Enable Javascript(click on the 'Advanced' Button) -> Change status bar text
Once you've done that in Firefox, add this snippet to your achor tags:
onmouseover="window.status=''; return true;"
I make no guarantees this will work as desired.
You can't force that to go away. It is a function of the browser and provides the very useful feature of telling the user where a link is leading.
Here is a userscript that apparently works for FF.
#namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
#statusbar-display:not([label^="Looking"]):not([label^="Connecting"]):not([label^="Connected"]):not([label^="Transferring"]):not([label^="Waiting"]):not([label^="Read"])
{opacity: 0 !important; }
http://userstyles.org/styles/43764/firefox-10-only-hide-hovered-link-target-urls
"useful feature"? awho the hell cares, where a link points to? this is just a huge annoyance in any browser. no normal user cares about this and even if they did, most URL are not readable anyway.
so this should be off by default and possible to switch on for developers...
I am using Internet Explorer 8, by choice. I need to debug a script in it. However, no matter how many times I click the Developer Tools Icon, under Tools or when I click F12 it will not show up. Sometimes, I can see that it is minimized in the taskbar but when I actually go to click it. It will not show up...
You may do Alt+Spacebar, then hit ‘m’ and start using your arrow keys to move the window around. And also check that link
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. :)