the firebug console show each ajax request, and its parameters and the response,
is it possible to get this in chrome ?
Ctrl-Shift-I will open Chrome development tools. I assume this is what you wanted.
To see Ajax requests, click on "Network" and you'll see all network requests being made. By default you see them all, although you can filter them and just see Ajax requests. Take a look at bottom part of Network tab; you'll see "Documents", "Stylesheets", etc. You want "XHR".
Yea u can have it. Enable it from the setting of chrome console.
Press ctrl + shift + I
click on setting (Gear) icon at the bottom right.
check "Log XMLHttpRequests" at the console section part.
Thats it.
Chrome developer tools will give you that and a lot more. Click on the wrench and select Tools->Developer Tools.
I believe they were open sourced by Apple - great stuff.
It's there by default click on the tool icon and under tools, can you find developingtool, which is a chrome version of firebug :)
If you want a Firebug experience within chrome for the console, use Firebug Lite extension for Chrome.
Related
I'm trying to identify API calls that a chrome extension is doing, but I am not seeing those in the network tab of Chrome (inspect->network).
Is there a way to mask those out from there? Should I use a different tool to identify the network activity?
I guess you must be using DevTools for Chrome to debug you extension. In that case you can't see the network activities of your extension.
In order to debug you extension, you should use the DevTools for Extension:
Right click the extension icon, and you will see Inspect the popup, click that and select Network tab and you are done.
Like this(pay attention to the title of this):
For more infomation, you can see Debugging of the chrome-extension tutorial. Hope this helps.
I don't know why it is showing the console menu like this.
If I hide the settings it will display
when I click on the error dropdown
This is how I want it to look like
Unfortunately, this is a browser update with Chrome DevTools in v58 https://developers.google.com/web/updates/2017/03/devtools-release-notes#console
Use Chromium builds, at least that still has the filter options.
Is there a firefox equivalent of chrome's inspector "Resources" tab? I am trying to delete something from localStorage for a web site in firefox but it won't go, and the standard settings->clear cahce don't affect it at all.
Check for this:
Enter about:cache in browser address and see "Offline cache device" section.
Firefox storage inspector lets you see local storage.
This seems to be the closest equivalent to the chrome resource tab.
I had to explicitly enable the tab in the Firefox Develop Tools Options to get it to show.
https://developer.mozilla.org/en-US/docs/Tools/Storage_Inspector
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.
In Chrome, how can I see what AJAX requests are being made?
In Firefox I use Firebug and I can see any background AJAX request that are made.
Open the developer tools with Ctrl-Shift-i, or via the menu at Wrench/Tools/Developer tools:
Click on the Network Tab:
Click on the "XHR" link at the bottom of the list to filter the results to only AJAX requests:
Click on a request at the left to select it and use the "Headers", "Content", "Cookies" and "Timing" tabs for that request to see more details:
You can use the button in the bottom left of the tools to open the tools in their own window if you like.
Here's what works for me on Linux and Windows 10:
F12 to open developer tools
click on the network tab on the top
list,
select XHR (it's circled in image below)
you can also use liveHTTPHeader, a chrome/firefox extension. it works pretty well.
In new Chrome browsers you can press F12 key or CTRL+SHIFT+I key combinations to view the Developer Tools. From there AJAX/XHR calls can be viewed through Network tab.