I've got a page that takes about 15 seconds to load, due to a few loops I have going on, cloning DIVs and loading content into them. Is there some way in the Chrome inspector that I can easily see where the hold-up in my script is?
EDIT: I tried the 'Profiles' tab in the inspector, but it doesn't show my actual script. It shows the jquery.js source code which is not useful.
Look at the Profiles tab of the inspector. note: this is webkit only
More information on the specific browser profilers can be found...
Chrome: https://developers.google.com/chrome-developer-tools/docs/profiles
FireFox: http://getfirebug.com/javascript
Opera: http://dev.opera.com/articles/view/opera-developer-tools/
Even IE has dev tools: http://blogs.msdn.com/b/ie/archive/2008/09/11/introducing-the-ie8-developer-tools-jscript-profiler.aspx
at the beginning of what you want to inspect put:
var startTime = new Date().getTime();
and at the end:
console.log(new Date().getTime()-startTime)
If the problem is related to the performance of javascript then Profiles tab in Safari WebInspector or Chrome DevTools will help you.
The difference between them in the profiling code for Safari JSC and Chrome V8.
JSC has Instrumenting profiler, V8 has Statistical profiler.
The first one is more precise, the second less affects the performance of the page.
The UI is the same in Safari and Chrome.
There is two different sort orders for the profiling data.
Heavy (Bottom Up) and Tree (Top Down). You can change it in the combo-box at the bottom of Profiles page.
If the most time consuming entry is the '(program)' then I'd recommend to use Timeline Panel.
Chrome version of Timeline Panel provides more information.
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 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.
This question already has answers here:
Closed 14 years ago.
What are your favorite JavaScript debugging tools besides Firebug?
Thanks,
Eric
Duplicate: JavaScript Debugger
For IE, Developer Toolbar.
For Opera, Dragonfly.
For cross-browser log output, Blackbird (though it currently has some CSS class naming issues that need to be resolved).
I use the Web Developer extension -- for DOM/CSS stuff, but usually related to JS. For stuff that works in FF, but not in IE I debug in Visual Studio. I've also got the Developer Toolbar installed in IE and have the Develop menu turned on in Safari.
EDIT: There's also Venkman.
alert FTW!!!
Internet Explorer Developer Toolbar is definitely one that rocks on IE for web development debugging. It's better for DOM inspection and browsing than firebug in my opinion and much less powerful when it comes to javascript.
Google Chrome also comes with some handy little developer tools, especially for javascript, just use Page Control (the page icon beside address bar) -> Developer and you'll see a javascript debugger there.
Opera has yet another developer menu: Tools -> Advanced -> Developer Tools (http://www.opera.com/dragonfly/).
My favorite is a combination of IE developer toolbar for HTML+CSS and Firebug for JavaScript and other stuff that's a little more sophisticated.
I'm trying to fix some JavaScript bugs. Firebug makes debugging these issues a lot easier when working in Firefox, but what do you do when the code works fine on Firefox but IE is complaining?
you can also check out the IE Developer Toolbar which isn't a debugger but will help you analyze the contents of your code.
Visual Studio will help with the debugging
Fiddler should help analyse the traffic travelling to and from your browser
You can try Firebug Lite or use Visual Studio to debug the JavaScript.
Since Internet Explorer 8, IE has been shipping with a built-in tool-set for debugging, troubleshooting, and generally helping in development of your pages/applications. You can access these tools by pressing F12 while in the browser.
HTML Tab
The HTML tab will let you peek into the DOM as the browser understands it. As you select elements from the HTML view, their styles will be detailed on the right, with individual rules have the ability to be toggled on and off. You can also modify rules, and determine whether the styles on the element were inherited, or assigned explicitly. Additionally, you can even tell which .css file they originate from.
There is a bit more you can do in the HTML tab, such as review and modify attributes on elements, and even make changes to the layout of the element from within the layout section. Additionally, you can make changes directly to the markup to quickly test out some structural ideas.
Script Tab
For resolving JavaScript issues, you can watch the Console and the Script Tag. If your script stumbles across an a call to an undefined method, you'll be alerted within your console. The console also lets you run arbitrary JavaScript against your page, if you want to toggle items on or off, or try bind a handler to a button.
The Script tab great as well as it will format your JavaScript for you, allow you to insert breakpoints, step in and over code blocks, and watch variables over time.
If you've used Firebug, or even the Webkit Inspector, the F12 Developer Tools in Internet Explorer 8+ should be pretty familiar to you.
Firebug lite doesn't work too well for me. The Developer Toolbar just isn't good enough. There really is no great solution.
Or IE Developer Toolbar
Have a look at DebugBar. License is free for personal use
For the DOM Inspector, try the Internet Explorer Developer Toolbar.
For the Net tab, try Fiddler.
For Javascript debugging, try Visual Web Developer 2008 Express Edition. (Or a higher edition of Visual Studio)
Also, try DebugBar.
Visual Studio 2008 can do JavaScript debugging, you have to go to IE's Tools->Internet Options->Advanced and uncheck 'Disable Script Debugging (Internet Explorer)' in order for the browser to bubble up the errors it detects.
Once you're in Visual Studio you basically have it's entire debugging arsenal at your disposal. It's not as integrated as Firebug, but it is way better than anything we used to have.
i think it is better that you first install the ie core addon in firefox then load the page with ie addon and press f12.
good luck.
Make a bookmark in the favourites bar, and put this address as the URL:
javascript:(function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return;E=F[i+'NS']&&F.documentElement.namespaceURI;E=E?F[i+'NS'](E,'script'):F[i]('script');E[r]('id',b);E[r]('src',I+g+T);E[r](b,u);(F[e]('head')[0]||F[e]('body')[0]).appendChild(E);E=new%20Image;E[r]('src',I+L);})(document,'createElement','setAttribute','getElementsByTagName','FirebugLite','4','firebug-lite.js','releases/lite/latest/skin/xp/sprite.png','https://getfirebug.com/','#startOpened');
Then navigatge to the page you want and click the link. Firebug Lite will/should open up...
The IE8 beta comes with what I think is the IE Developer toolbar, but it seems to be a lot more powerful than the last time I tried the toolbar on IE7
I'm guessing this question was posted before the IE8 final came out, according tho some of the answers.
These days, IE8's inbuilt Developer Tools are great; and while the JS debugging isn't as useful as Visual Studio the Dev Tools in general much better than Firebug in my opinion. Between that and the Compatibility View Browser Mode I can handle all my IE6 development needs.
I found a solution to this problem, you could simply stick this tag to the page you are trying to debug and it will open firebug:
<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>
Explanation from https://getfirebug.com/firebuglite#Stable
If you're a serious Front-end Developer, give AJAX Edition a test run:
http://www.compuware.com/application-performance-management/ajax-performance-testing.html
It's a free tool that allows users’ to understand what is causing performance and functional-related problems in modern AJAX/web Applications.
In IE, go to MenuBar->Tools
Select Debugger Tools
Hit F12 and enjoy.
It is far from Fire Bug, but suitable for some quick help
There is always a way how to get around this issue, watch the video and you will be able to install firebug in 2 mins.
install firebug on ie
Good luck