Live JavaScript edit in Safari? - javascript

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!"

Related

How do I pause everything running on a webpage?

I have a piece of JavaScript code running in browser and I want to pause it to see what values are in the console.
I have a lot of logs going on so I need to see whats logged at a certain point through running the script.
I am running chrome, is there a button or shortcut to do this ?
Whenever you want to add breakpoint enter the following in debug console (F12 in Chrome):
debugger;
It works in most browsers.
You must to use developer tools. If you use the debugger you can put break points and pause in exceptions. You can view variable values, objects structure, and much more information.
Maybe this link is useful for you: https://developer.chrome.com/devtools/docs/javascript-debugging
Good luck
PD: Note that firefox's developer tools are better and more complete than chrome developer tools, but in essence are for the same purpose.
F12 brings the Developer Tools. There, go to Sources and pick your source script. You may either change some lines to include a debugging directive, namely
debugger
which will pause the processing and let you fiddle around.
There is also a possibility of signing a line where you want to pause, by simply clicking on the line's number in source view in the developer tools.
This is what you are looking for.
https://developer.chrome.com/devtools/docs/javascript-debugging
You can pause scripts and hover your mouse over to see variable values at that point in the script. Enjoy.
Open Developer Tools (Ctrl + Shift + I)
Go to Console tab
Paste this to the console:
setInterval(() => { debugger; }, 5000)
Now make the page to be on the state that you want (open drawers, open gallery menus, etc...) after 5 seconds (you can tweak this 5 seconds by changing 5000 to other numbers 5 * 1000 = 5000) website will freeze.
Now do what you wanna do with the site!

Which JavaScript functions are called when page loads?

Is there any way to find out which JavaScript functions are called when a page is loaded?
One way is to use alert but if a file is too big ( in my case 5000+ lines ), it would be too difficult to use alert.
I want to find out is there anything in FireBug or Developer Tools that shows the order in which functions are called
Thanks
By the way, thanks to the person who gave negative comment
The Simple Solutions(tedious for you if you have 5000+ line codes) To Your Queries is
Debbuging
There are many way you can debug Your Javascript code
A)The Chrome DevTools include a number of useful tools to help make debugging JavaScript less painful.|
The Sources panel lets you debug your JavaScript code. It provides a graphical interface to the V8 debugger. Follow the steps below to explore the Sources panel:
Open a site on chrome
Open the DevTools window.
If it is not already selected, select Sources.
B)You can use FireBug Chrome tool But i Beleive Chroe Debugger is handy
but Choose Opera For Optimum result
path
Internet Explorer 8 (Developer Tools - F12). Anything else is second rate in Internet Explorer land
Firefox and Firebug. Hit F12 to display.
Safari (Show Menu Bar, Preferences -> Advanced -> Show Develop menu bar)
Google Chrome JavaScript Console (F12 or (Ctrl + Shift + J)).
Mostly the same browser as Safari, but Safari is better IMHO.
Opera (Tools -> Advanced -> Developer Tools)
use window.onload is perfect to your request
window.onload = function(){
alert("the page is loaded!!!");
};
it was tested onload=function vs window.onload=function
window.onload // works in all tested browsers
onload // works in all tested browsers, faster than window.onload
so it can't fail... use it, for me is the best way
Live CODE

javascript line by line debugger

This might sound crazy but is there a debugger out there which automatically breaks on the first line of executed code ?
Sample : suppose I have debug mode on and I click on a button. Now the intelligent debugger should automatically set the breakpoint on the first line inside the .click({}) function.
This way it is very easy to see the starting point and very easy to backtrack.
There must surely be something.
Thanks
Most debuggers in the browser allow you to insert the keyword
debugger;
into your code which will cause a break to occur at that point in the execution.
Chrome with CTRL+SHIFT+J. ;) You can put breakpoints there. I think it also works under FF. Also new versions of IE have JavaScript debuggers (don't remember the shortcut though).
F12 in most browser opens the debugger.
Chrome, Safari, IE have this by default, and for FF there is the Firebug add on.
Also you can debug from visual studio, select debug from the menu --> Attach to process and then select the interter explorer process. But You should enable the script debuging in Internet Explorer first.

How to write and run scripts in the Google Chrome Javascript Console?

I recently switched from Firefox to Chrome and I (probably) missed an important feature. I was used to test javascript snippets on FF from within the Firebug console this way: open the console, write the script and finally press CTRL + Return to execute the code.
It seems not possible to do the same in Chrome console, as when I type some code there and press return to start a new line the code is executed immediatly.
Is there a way to replicate the Firefox behavior on Chrome?
Thanks.
It seems that there is no explicit “multiline mode”.
But you can:
Paste code (it will preserve multiline)
Shift + Return to add a new line without executing the script
Related bugs:
https://bugs.webkit.org/show_bug.cgi?id=30553
http://code.google.com/p/chromium/issues/detail?id=72739
You can also hit Shift + Enter to start a new line without running the code in Chrome's console: https://developers.google.com/chrome-developer-tools/docs/tips-and-tricks#multiline-commands
Install Firebug Lite for Google Chrome. It has got a console.
Don't look for a full fledged Firebug. You will be disappointed :)
Oops,I didn't read properly at first. My bad!
In Firebug Lite, take Console. Then you will see a tiny red up-arrow at the right corner.
Click on it and you will get a multi-line console. Won't you?
I recommend this:
Write debugger; and hit Enter, in the console tab
This takes you to the Sources tab; if not, make sure debugger breakpoints are active
Now you can write whatever you want in the Sources tab, which acts like a full IDE with features like newline and indentation
Select any part of your code to run, and right-click, choose Evaluate in console
Better way of doing this using Chrome featue i.e Snippets where you can write javascript and save it in chrome developer console.
Its available underneath source inside developers tools while inspecting element.
More info about the snippets can be find on this link.
It was available in Chrome canary and I guess now it is available in default chrome browser also.

debugging with internet explorer

I have some code that I thought I had written so that it would play nice on IE. But apparently it does not. I use IE8 for my testing and get quite frustrated with the built-in debugging 'tool'. I found that firebug has a javascript tool that debugs for IE but I have to click it for every page, wait for it to load and then test my script. Is there a way to make IE ALWAYS load the firebug .js file? I tried searching for way to set up a custom header file for my IE installation but was unsuccessful.
Is there another tool out there that would be better/easier to use? Another way to test scripts for IE compatibility?
IE7 and 8 provided the IE developer toolbar. This is similar to firebug for DOM inspection, script debugging and style tracing.
Edit:
For IE 8, the toolbar is already packaged with the browser:
The Developer Toolbar is not compatible with Internet Explorer 8. Please use the developer tools included with Internet Explorer 8. Press F12 or click the 'Developer Tools' entry in the Tools menu to begin using the tool. Click here for more information on IE8 Developer Tools.
You can also use Visual Studio and attach to the process in question, then just debug in VS. Pretty good debugging tools, and lets you debug IE6 as well.
Try my log4javascript, which is a logging library that works in every major browser, including IE 5 and later.

Categories