When using Safari Web Inspector to view the Network Log, the log is reset upon navigation, i.e. navigating to a different page clears the log.
In the Chrome Developer Tools, I can easily persist the network log by checking the "Preserve log" checkbox in the Network tab. In Firefox Developer Tools, I can preserve the network log by checking "Enable persistent logs" in the developer tools preferences.
With this persistence enabled, the network log remains intact until I manually clear the output, simplifying the process of tracking requests and redirects that happen during navigation to a new page.
Is there a similar feature in Safari Web Inspector?
In Safari 16.0 they have moved again:
In Safari 11.1.2 this is a setting on each tab under the checkbox "Preserve Log"
Note that if your Web Inspector window is too narrow to show all options, you'll have to expand it until it is wide enough to display the Preserve Log option, as mentioned in an answer by ShortFuse.
In Safari 11 this was in the Settings panel under "Network: Clear when page navigates", and it's sister setting "Console: Clear when page navigates".
There is a Preserve Log option in Network.
The problem is that if your window is too narrow, it disappears and Safari gives you no indication that it's there. Resize your Web Inspector window to be wider.
(That was a fun one to figure out!)
This was just added to WebKit last week: https://trac.webkit.org/changeset/211451
You can expect it to make it into a Safari Technology Preview build soon. Once it's in a build, you can toggle preserving logs on navigation in the Settings Tab.
It is the logo with a circle and 3 horizontal lines that preserves network tab -> preserve logs button, at least in Version 16.0
Related
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 have an image tag
<img src="https://biossantibodies.com/image-raw/4449.jpeg">
Where it displays properly in Chrome/Firefox/Safari, but not IE.
Result
Fiddle link: https://jsfiddle.net/bheng/6z3u7dxm/
Chrome
IE
Console Error
Network Tab Result
How can I debug this?
set up the IE debugger to record console messages for blocked and insecure content... Tools>Internet Options>Advanced tab, check "Always record developer console messages". Save changes... now when you open the dev tool it will list any (otherwise) suppressed markup and blocked content warnings and messages.....
While you are configuring Internet OPtions above, also make sure that your IE security zone settings are restored to the factory/company defaults... Security tab of Internet Options, click "Reset all zones to default". Settings for Multimedia and images ( elements) can be found on the Advanced tab of Internet Options Multimedia section and in the Security section on the Advanced tab of Internet Options, re: "Block unsecured images with other mixed content"
To find out which IE security zone a domain is mapped to, when visiting the domain, select the File>Properties menu from IE.... it lists the IE security zone that the domain is mapped to.... If you have placed the domain in your Trusted, Intranet or Restricted sites list, remove it.... other browsers do not use the IE Security zone model (security by per site)... publicly accessible sites are/should be designed to work in web browsers to work in the browsers' default security zone/settings.
You should also note the site specific settings for ActiveX filtering and Tracking Protection... you can turn those features on/off from the Tools menu in IE.
To list the request and responses on the Networking tab, pin the dev tool to your browser tab, then click the Start button on the networking tab, and the button (looks like a floppy disk) to "Always refresh from server"..... without closing the dev tool.
It is important that when debugging scripts on web pages that 1. you have configured the debug tab to "Break on all exceptions".... on the debug tab, select "Break on all exceptions" from the dropdown (looks like a Stop sign). 2. The dev tool MUST be open while you are debugging, so pin it to the bottom of the tab you are debugging.
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/).
When I am debugging frontend work, I frequently have multiple Inspector windows open at the same time, each inspecting a different page. As I change Inspector windows, I would like the displayed tab or window to follow me. In other words, I would like the browser to always automatically change to the page I am inspecting; I do not want to change Inspector windows, then go to the browser and find the corresponding tab or window myself.
Is this possible in Firefox? Is it possible in any browser?
(I realize I could dock the Inspector to each tab or window. I do not want to do that because I use the multiple Inspector windows side-by-side for comparison.)
While I am not aware of any way to switch to the target browser tab when selecting a given inspector window, you can certainly do it the other way around:
Say you have 3 tabs opened, and you have opened devtools for each them, in window-mode (undocked). Now, whenever you select any of these 3 tabs, if you just hit F12 (or ctrl+shift+I/cmd+alt+I), then the corresponding devtools window will be brought to the front.
That's an easy way to keep track of which devtools window is linked to which browser tab.
Now, doing this the other way around would require a new feature to be implemented. This can't really be automatic (or at least hidden behind a config of some sorts) because it could be considered frustrating to some users, having their current tab being switched away from each time they click in a devtools window.
I have filed this bug to get it done: https://bugzilla.mozilla.org/show_bug.cgi?id=1163646
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.