When using Safari Web Inspector to read the JavaScript console output, the log is reset upon navigation i.e. going from page index.html to mail.html clears the console output. In the Chrome Developer Tools, I can easily preserve the log by right clicking on the console space and selecting Preserve Log Upon Navigation. With this option, console log output remains intact until I manually clear the output simplifying the process of debugging JavaScript that refreshes or redirects to another page.
Is there a similar feature in Safari Web Inspector?
I don't know when this was added, but it is present in Safari on El Capitan (Safari 9.0). It works the same as in Chrome (right click in the console window and select "Keep Log on Navigation").
Update: As per Daniel Compton's answer, in Safari 11+ this is now under the settings icon as 'Console: Clear when page navigates'.
Update: The setting is now back to "Preserve log" in the Network tab in the developer console in Safari 14+
In Safari 11.1.2 they moved it again(!) back to the Console tab under the "Preserve log" checkbox. The Network log has similarly moved back to the Network tab.
In Safari 11 they moved it to the Settings panel under "Console: Clear when page navigates". It also has a sister setting "Network: Clear when page navigates".
No, there is no such feature (in Safari 5.0 at least). Looking at some Google results, I don't think this feature exists in any Safari version.
As of October 2022, Safari 16 and MacOS Monterey 12.6, for some reason the setting is now hidden here:
As #joseantgv wished in the accepted answer's comments, they excelled again and were able to hide it a little bit more 🤣🤷🏽♂️
For old Safari versions, you can right-click on the console and select the Keep Log on Navigation
Related
When I input window in Edge Console Tab, and click the expand arrow, got nothing.
> window // click to expand, but got nothing
Here is the Edge expand result.Please click to view
But it well in Chrome or Firefox.
Why?
Here is the Chrome expand result.Please click to view
FYI, this also occurs in Brave so it might be a chromium issue (pure speculation there).
I have tested and can reproduce the issue in Edge Stable. I also tested in Edge Canary and found that window in console can expand well. That means the issue has been fixed in future version of Edge. We can wait for the new version of Edge Stable to release.
I'm currently learning javascript. Therefore I'm often in the Brwoser's dev tool, in the console tab. Now there is something that I can't explain. The output in the console log is different after refreshing the webpage. Either it is like the upper window in my screenshot or like the lower window. In Chrome it is always like in the upper window.
In Brave browser the chance is about 50/50 that it is like the upper or lower.
I have found out that the option "preserve log" change the output so that it is always like the upper screenshot. But I would like to turn off this option to get a cleared console after a refresh.
Does anyone know how to change this behavior of the browser?
I'm working on macOS 12.0.1 Monterey and
Brave Broser: Version 1.32.106 Chromium: 96.0.4664.45 (Offizieller Build) (x86_64)
or
Chrome: Version 96.0.4664.55 (Offizieller Build) (x86_64)
I would like to share the solution to my problem.
Now I'm a few lessons further in my course and got new commands.
With the load EventListener it works:
let jumbo
window.addEventListener("load", e => {
jumbo = document.querySelector(".jumbotron");
console.log(jumbo);
});
The teacher mentioned also that there are also two other parameter or commands: "async" and "defer".
Click the gear in the top right corner of the console panel to show options. Untick "Preserve log".
Currently in my Google Chrome JS console, all of my console.logs, network errors, etc. are preserved between page refreshes even though I have Preserve logs disabled. Does anyone know a fix to this? Here are my current settings for my console:
This issue has been fixed for me by doing the following:
While inspect is open press F1.
Scroll to bottom and click
'Restore defaults and reload'.
Close Google Chrome.
Reopen.
Also, you may need to delete Google Chrome and reinstall.
In Chrome this is possible, but I don't find a way to do it in Safari.
Is it possible? How?
Currently this is not possible.
The closest option is to pause JavaScript and execute commands from the console.
To open Safari dev tools, press CtrlAltC on Windows or commandoptionC Mac. Or enable Safari dev commands in the menubar in Safari Preferences -> Advanced -> Show Develop Menu.
See Apple's docs on how to use its dev tools.
Unlike in Chrome, the Safari debugger does not currently support the ability to click on a script file and edit it in place. However, you can still stop execution using break points or the pause button, then execute code in the console to alter values, then resume execution.
For example, if you have the code:
var t = 1;
(function(){
var t = 2;
console.log(t); //* put break point on this line..
})();
console.log(t);
And you but a break point where indicated, then run t = 4 in the console, the value 4 then 1 are printed to the console.
As of April 2020, this is now possible in Safari!
https://webkit.org/web-inspector/local-overrides/
Although both chrome and safari use webkit as their engine, chrome makes its own customizations and additions over it. Live editing of javascript seems to be one of them.
If you look closely the debugging panels in chrome and safari have many other differences as well. A clearly visible change is settings icon present in chrome and thats not available in safari.
Try in Safari Technology Preview 15.4:
console.log("I'm live!");
It outputs
> "I'm live!"
I am trying to watch my javascript code using the console.log(text) command - and it does work... but the console gets flushed everytime the url changes.
Is there any way to persist my console logs between page changes?
Click on the bottom-right corner gear icon in the Chrome developers tool, check 'Preserve log upon navigation' option and you are done.
For the record, these days both Firefox and Chrome have 'persist' options in their inspectors / conosole. You need to right click in the console window and then select the relevant option tfrom the popup menu.
There isn't a way to do this yet but from what I've read it is a future feature they will implement. Here is the Issue ticket on it: http://code.google.com/p/chromium/issues/detail?id=77058
EDIT:
Chrome has implemented this feature. Read the answer below
There's only 1 way that I know of, but not with Chrome: With the built-in Web Inspector in Firefox 4+, which doesn't flush the logs between pages.
#scrappedcola notes that Firebug does this as well, but I'm referring to the built-in inspector.