How to use Firefox dev tool profiler on chrome? - firefox

I'm trying to use Firefox dev tools to profile what happens in the australis customize area when I add a widget to a toolbar and when I add it to the panel.
But I can't figure out how to get the profiler to work. Press Ctrl+Shift+k while in the customize tab won't even bring it up.

You need to use the "Browser Toolbox" from the Developer menu.
If you don't see it, just go to any normal web page, bring up the ctrl-shift-k console, click on the settings cog on the top left and then enable the advanced option called "enable chrome debugging".

Related

Inspecting a browser's Developer Tools [duplicate]

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.

How to view cookies in safari 10?

These are the approaches I have tried:
View HTTP headers in Safari 10, but the cookies is not showed there
I can find Cookies section under Storage Tab, but the Cookies are displayed in a table.
I would like to view the Cookies in a string rather than a table, is there any way except using another browser?
Go to the Console* tab. Type
document.cookie
which shows all cookies for this location.
*: to access the console, (credit #Geoff Crompton)
if [you] have the developer menu enabled, [you] can go to the Develop menu, choose Show Web Inspector, and in the bottom of the new window type document.cookie to see the cookies for the current website
Safari Version 14.0.3 (16610.4.3.1.4)
The Develop menu of Safari adds a variety of additional features to the web browser on the Mac, including the inspector and error consoles, javascript debugging tools, the ability to disable various page elements, enable the Do Not Track feature, use WebGL acceleration, and it offers a simple way to change the browsers user agent.
Develop menu in Safari:
Pull down the Safari menu and choose Preferences
Click on the Advanced tab
Check the box next to Show Develop menu in menu bar
Close Preferences, the Develop menu will now be visible between Bookmarks and Window menus
It will require a little fiddling, but there is a Python script here http://www.securitylearn.net/2012/10/27/cookies-binarycookies-reader/ that can dump the Binary Cookie format (located in ~/Library/Cookies/).

How do you close the DOM Properties window in Firefox Developer Edition?

I am using Firefox Developer Edition and when I had the Inspector open, which is accessed by right-clicking an item and selecting Inspect Element, I then right clicked something in the Inspector and selected Show DOM Properties, which you can see in the screenshot below:
However I cannot figure out for the life of me how to close the DOM Properties window.
How can one do this?
The feature you're referring to is called the "split console." You have it toggled on currently. It will show when a tab other than the console is selected. You can click in the split console, or command+alt+k on OSX, and hit escape to close it, or click on the console tab, or click the button in the top right of the dev tools to toggle it back off. I find it most usefull with the debugger tab. When the debugger is paused, you can access variables within the scope of the breakpoint.
Pressing escape with the DOM properties panel focused should get rid of it.

What is the use of F12 key in Mozilla Firefox?

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.

Chrome Debugging tutorial appears not do work. What I'm doing wrong?

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.

Resources