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.
Related
I have noticed some weird behavior in Chrome Dev Tools in at least the current build I have and possibly a few others before...
This is my current Chrome Version: Version 78.0.3904.87 (Official Build) (64-bit)
So what happens is I open Dev Tools using F12, click elements, select an element to view using the element selector and then at some point for seemingly no reason, it switches to Sources. This happens over and over again. Basically I am trying to do something with the element and then it suddenly switches to sources within 10 seconds and usually to some random weird js file.
No idea why this is happening, and it just started recently, within the past 2 weeks. It is literally driving me crazy because I like to play around with styles on elements in the HTML to see what they will do at times.
Any suggestions or is this some bug in Chrome now?
Was running tests on an internal webpage using IE, to check load times, and noticed the page loads roughly 3x's faster while having the developer tools open. I can reproduce this 100% of the time, and as soon as I close developer tools the website significantly slows down. If I had to guess it would be javascript related but outside that we're not sure.
Chrome and Firefox are lightning fast in comparison but IE is our corporate standard.
Any thoughts?
I'm trying to debug a CMS-backed website (Drupal 7). It is displaying some problems due to conflicting Javascript. For a fraction of a second, the site components are fine, and then *SNAP*, they're broken. It must brake as soon as the conflicting resource loads.
Using Chrome's developer tools (or Safari, Firefox... even IE's), is there a way to load the page, one Javascript resource at a time? This way I can see exactly which resource loads when the page issues appear.
(I'm also open to better ways of debugging this kind of thing.)
You can use the Pause on exceptions feature of DevTools, in Sources Tab, it is the hexagonal pause button at the far right.
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
Is there a web developer functionality/tool that allows us to know how many times a browser is doing reflows?
basically I want to have some sort of feedback/information. I don't know how it will be, but perhaps some sort of performance graph that shows the timeline (akin to Google's Speed Tracer) so I can investigate when suddenly at a point the browser is doing an insane amount of reflows so I can point out hey here's a bottleneck, there got to be a bug/bad implementation of something here or something.
Chrome and Safari have Timeline tab in Web Inspector where you can see all the reflows and redraws made by browser.
Firefox has MozAfterPaint event. It can help you understand which regions of the page and when repainted by the browser. Firebug Paint Events add-on can be helpful here. It shows repaint events in FireBug console.
You can track reflow information if you have a custom built Firefox.
see below:
https://developer.mozilla.org/en-US/docs/Debugging_Frame_Reflow
How to build Firefox with enable debugging mode:
https://developer.mozilla.org/en-US/docs/Developer_Guide/Build_Instructions
Sometime after late 2013, the reflow logging is built into Firefox logging.
https://mail.mozilla.org/pipermail/firefox-dev/2013-October/001044.html
In browser console (Tools > Web Developer > Browser Console), in the [CSS] menu, select "Log"