I do wonder if it's possible to open the Firefox's (I have 18.0.1) debugger in a new window/tab as right now the debugger's pane is too small at the bottom of the page.
[Edit]
Ok, I've made a few screenshots to show that Firefox does have a debugger on its own:
Current Firefox nightlies have a little two-window icon next to the 'x' in the debugger toolbar that tears it off into a separate window, but that might not be present in 18 yet...
If you mean Firebug, these directions should be sufficient.
Click on the Firebug launch icon so the hidden submenu appears.
Hover over "Firebug UI Location"
Select "Detached"
EDIT:
Ok I see... you are using the Firefox built in Developer Tools and not Firebug.
So as far as I understand, there seems to be no way to run the JavaScript Debugger on a separate window for non-remote work. Here is a statement directly from the JS Debugger docs:
The JavaScript debugger is available in two varieties: one for
debugging content running directly in Firefox, and another that lets
you debug code running on a Firefox OS device, or in Firefox on an
Android device. The main difference between the two is that the Remote
Debugger runs in its own window, while the web content debugger runs
in the same tab as the Web content you're debugging.
Also here is a link to the Debugger's docs:
https://developer.mozilla.org/en-US/docs/Tools/Debugger
Why do you think that the Debugger view is too small? If you hover over the top bar, you can drag it up/down as much as you need to. Aslo are you sure that the JavaScript Debugger is what you're trying to use? For example Firefox has other tools as well. The "More Tools" link shows other built in tools as well - all these tools together are called the "Developer Tools". Here is a link to all of their docs: https://developer.mozilla.org/en-US/docs/Tools
I hope this makes more sense now!
Screenshot:
Related
I'm debugging a react application using VS Code debugger for Edge (The newer Chromium edition, I used to use Chrome, AFAIR there was the same problem). When I reload a page, the "paused in debugger" label appears a couple of times, then disappears. It doesn't bother me too much, but the problem is it always opens Sources panel and because of that on every reload I have to open Console manually which is very annoying.
I'm absolutely sure I have no breakpoints on, the Breakpoints panel in Edge is empty, the Breakpoints panel in VS Code only contains my breakpoints and the problem persists if I disable all of them. I also have Uncaught exceptions breakpoint turned on, but disabling it doesn't help. Sources panel opens some React internal file, namely injectGlobalHook.js. Also sometimes after reloading a page I open VS Code to find that it opened a tab with react-dom.development.js for some reason. Is it supposed to work like this? And is it possible to make Console tab open on reload, because it's impossible to work like this
According to Google this can be accomplished by visiting "chrome-devtools://devtools/devtools.html" in Chrome but now visiting that page in the stable version of Chrome (or Canary), just shows a 99% stripped version of the inspector.
To reiterate my "title" this is in reference to "inspecting" the inspector. Not just inspecting a normal webpage.
And while I don't think it's necessary to know to resolve the issue, I"m inspecting the inspector so I can style it as discussed by Paul Irish and here: https://darcyclarke.me/articles/development/skin-your-chrome-inspector/
Follow these easy steps!
Press Command+Option+i (Ctrl+Shift+i on Windows) to open DevTools.
Make sure that the developer tools are undocked into a new window. You may have to undock from the menu:
Press Command+Option+i again on this new window.
That will open the DevTools on the DevTools.
You can redock the page's DevTools if you want.
If it's not already, select Elements — it's the first icon at the top of the inspector.
A little beyond the scope of your question, but still valid in understanding why you're experiencing your problem can be found by understanding how Chrome Developer Tools: Remote Debugging works.
Open chrome://inspect
Open the inspector on that page (cmd + alt + i)
Scroll to the bottom of the page, under the Other section click the inspect link
The URL in the Other section should look something like this:
chrome-devtools://devtools/devtools.html?docked=true&dockSide=bottom&toolbarColor=rgba(230,230,230,1…
EDIT: they've fancied up the chrome:inspect page so you have to click the Other header on the left to get this to work now.
I just got this to work. The key is that you have to start up chrome in 'Remote Debugging' mode.
on OSX, open an terminal window and execute the following:
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
On windows, Its
chrome.exe --remote-debugging-port=9222
(better windows instructions can be found here: https://developers.google.com/chrome-developer-tools/docs/remote-debugging#remote)
This will start up an instance of chrome, that will send debugging messages to a local webserver on port 9222.
If you access that web service, it will give you the ability to use the inspector to inspect any chrome window that is running. Since we want to inspect the inspector, we need to start an inspector window first (As above Use the shortcut keys; for Mac it's Command+option+i.)
Now, go ahead and navigate to
http://localhost:9222
It will present you with a list of windows to display in the debugger. Select the window that starts with "Developer Tools" and you'll be able to inspect the css for the inspector.
Its hard to see in the image below, but on the left I have my chrome window pointing at the remote debugger, highlighting one of the toolbar labels. On the right you see it lit up with the tooltip just as if we were debugging a web page.
A few weeks ago somebody pointed this out in stackoverflow's "javscript" chatroom. First, and very importantly, make sure the inspector is undocked from your browser window. Then it's just a matter of opening a inspector window and then inspecting that window. In windows it's CtrlShiftI (Edit: I said, CtrlShiftI but that brings up the console inspecting the console... you should be able to navigate back and forth.) for the keyboard shortcut. (Other keyboard combos for other options and OSes here and here.) Just do that twice and you're good.
Edit: ok, you're probably confused as to undock the window. This is what you'd click if it's docked..
Edit II: I'm not quite sure why you can't inspect. JDavis's answer is consistent with the Google Docs for Apple computers. If you're using Linux it appears to be the same as Windows. You supposed to hit the inspector key combination while the focus is over the inspector window.
I think it is used to check the coding but when I tried it didn't respond. I mean it doesn't give any response and showing the data of current website.
F12 opens the built in Firefox Developer Tools in recent versions of Firefox. Press F12 again to close it. There is an extension to turn off the shortcut: https://addons.mozilla.org/en-US/firefox/addon/disable-f12-shortcut/
The f12 is a shortcut to Open up firebug in firefox. To open up firebug you must firstly have it installed
F12 is a standard Firefox shortcut that toggles the 'Firefox Developer Tools' on and off.
When you hit F12, Firefox's bottom half opens to show/reveal it's 'Developer Tools,' a Web Console (toolbox?), which
Logs information associated with a web page: network requests, JavaScript, CSS, security errors and warnings as well as error, warning and informational messages logged by JavaScript code running in the page.
Enables you to interact with a web page by executing JavaScript expressions in the context of the page.
It also has an inspector, a debugger, style editor, a profiler and more.
Again, F12 toggles it on and off.
Go to ≡ > Web Developer and you can see the menu of all it does and their shortcuts.
(Firebug was a free open-source web extension for Firefox that facilitated the live debugging, editing, and monitoring of any website's CSS, HTML, DOM, XHR, and JavaScript.
It was deprecated (replaced by something better) in favor of the integrated developer tools (F12) added to Firefox itself. As Firefox 57 no longer supports XUL add-ons, Firebug is no longer compatible.)
F12 is not bound to anything in Firefox - see Keyboard shortcuts. You are probably thinking of the Firebug addon which opens with that key.
The built-in Page Inspector in Firefox (v10 onwards) is accessed with Ctrl+Shift+I and then Alt+M.
In newer versions of Firefox (I have 91.12.0esr), there is an
"experimental" setting in the about:config configuration page that can disable the F12 hotkey (https://bugzilla.mozilla.org/show_bug.cgi?id=1630228)
Setting the devtools.experiment.f12.shortcut_disabled key to true causes the F12 key to bring up a temporary text box that says "To use the F12 shortcut, first open DevTools via the Web Developer menu." but thankfully no longer opens the DevTools bar.
This should be the default behavior, IMHO, since only a small fraction of users will know or care about viewing the HTML source of the page.
I'm trying this Google tutorial to debug my Chrome extension:
http://code.google.com/chrome/extensions/tut_debugging.html
I've switched to developer mode on the Extensions page
Installed the Hello World extension as advised by the tutorial
Now I'm right clicking the icon of the Hello World extension to get the menu.
In this menu (and developer mode on) there is supposed to be an item called Inspect popup, but it's just not there. It's not on any other extension either.
I'm using Chrome V21 on Windows 7 x64.
The "Inspect popup" option is back, the answer below is no longer valid for recent Chrome versions (~27?).
That tutorial is slightly outdated. Indeed, in the past, every browser action button had a menu option called "Inspect popup". When a browser action didn't have an associated popup, the option was still visible, but disabled.
Now, you have to open the popup by clicking on it, then right-click inside the displayed popup and choose the "Inspect Element" option in order to launch a dev tools instance for the popup.
I am using Firebug with Firefox 3.6 on OSX 10.5.8. Since FF 3.6 there is a shortcut to activate fullscreen mode which is "shift" + "command" + "F". But it is the exact same shortcut of Firebug to launch "Display Element Information".
Since i never and don't really need fullscreen mode and use extensively the "Display Element Information" feature of firebug; i am trying to either change the firebug shortcut or disable the FF shortcut.
I tried finding something when accessing about:config but could not find anything relevant.
Does anybody has a solution or hack?
cheers
Change FireFox Shortcuts:
There is an extension called KeyConfig that allows you to change the keyboard shortcuts in FireFox. You can find it at the following URL:
http://forums.mozillazine.org/viewtopic.php?f=48&t=72994
Change FireBug Shortcuts*:
Open the FireBug Panel
Click the FireBug icon on the top left
Select "Customize Shortcuts"
Change the shortcuts you want then restart FireFox
*Note:
I am using FireBug 1.5
I am not sure if the option you want is in the list of shortcuts you need to change.
Hope this helps.
I think the shortcut you are referring to is actually part of the Web Developer plugin, not Firebug. Firebug has a simliar "Inspect Element" function that uses Ctrl-I.
If you don't want to install yet another plugin, just to change one shortcut, then you will have to change the Web Developer shortcut to something else.
I've tried overriding this behaviour using the OSX System Preferences, creating an Application-only shortcut to the menu item: Tools->Web Developer->CSS->View Style Information, but no dice. This plug-in, while one of the most useful that I've found, has always seemed kind of shoddy. It's rarely updated, and bugs seem to live on forever. It breaks every time FF is updated. etc etc. But I still love it.
Not sure which extension is causing this for you. Just checked Web Developer Toolbar and don't see Cmd-Shift-F anywhere.
One newer feature in Firebug is the Customize Keyboard Shortcuts preferences panel on the Firebug menu. Open Firebug, click on the Firebug bug icon menu in the top left of the panel and select Customize Keyboard Shortcuts from the menu that shows up. You'll likely need a restart for these changes to take effect.
Well, now i feel very stupid !!!!
Indeed it is a shortcut from the Web Dev Toolbar and not firebug. I used these 2 so much during a day of work that i forgot they are 2 separate add-ons.
I was able to change the shortcut via the "Options" menu of the Web Dev Toolbar.
And just in case someone changes a shortcut, remember to restart FF for the changes to take effect.
mea culpa.
But thank you every one for helping.
Case closed !