I'm debugging a performance issue in my app and seeing that Firefox spends a lot of time in Tools. I know what Idle, GC, Network and Gecko refers to but I don't understand what Tools means.
According to the documentation for the Performance panel Tools are part of the platform data. That page unfortunately doesn't explain exactly what "Tools" mean, though. It seems that every page spends some time in "tools" code.
If your page consistently spends most of the time in "Tools", you should expand it by clicking the little arrow besides the word. This will show you one or more functions within your code that take up the time.
Those functions should then get your focus when optimizing your code.
I have to automate on button "Accessibility Checker" which will come after inspecting the web page as shown in the picture. Please suggest me how to automate this as of now I am using UiPath, but that is not working (not able to select a correct Selector).
As far as I know chrome is a bit tricky since it has a lot more background updates than other browsers. So use something like IE if you can. Other than that, you can use anchor base activity with image activities. I get accurate results with that solution on cases where I am not able to use clicks.
In attempting to profile the performance of a site with PageSpeed tools i get a vague minimize main thread work suggestion as shown below:
The Learn More link is not exactly helpful here. I can see that style & layout is a large portion, so i'm trying to profile the site using Chrome Dev Tools. After i run the performance trace, i can see all the style, layout, and repaint in the main thread.
Where i am stuck, and have not found a helpful guide is how to actually translate these events on the timeline into the actual DOM element, or styles that are causing the performance bottleneck or particular repaint. All of the examples i've been able to find show a very simple example with just a few elements on the page.
How do i trace down what is causing the largest style and layout bottlenecks in terms of actual code?
I am quite sure that with the good old Firebug, it was shown in the Layout tab, together with the box-sizing property.
Is it possible to tell in the Web Developer too? There is a Box Model tab which is quite similar to the Layout tab of Firebug, but it does not show this information.
Btw: I thought the built-in Web Developer was built on Firebug, but when reading about it it actually seems that they are two quite separate things.
That feature is currently only available in Firefox Nightly.
I am having my first foray into website design and I am learning a lot. I am also now seeing why web developers are not a huge fan of developing for Internet Explorer. Nothing seems to work how I expect. However, since the website has to work cross-browser, I am spending time looking at it in Firefox, Chrome, and IE. Something that is very non-obvious to me, however, is how to tell where problems lie in the website.
For example, the layout of one of my pages forces a footer to the bottom of the page. It looks great in Chrome and Firefox, but there's something broken in IE that make the footer align to the right (and cause a horizontal scroll to appear). I have played around with the code, but nothing really is responding to how I want in IE (even though it does in other browsers).
Are there any tools that can help "debug" the problems on a web site so fixing it is more than just a trial-and-error approach? Thanks.
One of my favorites that works in all browsers is X-Ray. You simply stick the link on that page into a bookmark and it loads some external JavaScript on top of the page you're testing. It reveals a bunch of parameters about the DOM object you click on, as well as its hierarchy in the model.
As for your specific footer problem, I would look to a potential lack of clearing of floats and divs that are wider than their parent containers somewhere up the line.
There are frameworks like GWT, ext-js, YUI which hide a lot of the browser bugs from you. But today (near the end of 2009), there still isn't a good, realiable way to narrow down browser issues and to fix them.
PS: I'm collecting tools that help during debugging here: Which tools do you use to debug HTML/JS in your browser?
I assume you have checked that your code is valid, with
HTML validator, for example: W3C Markup Validation Service
CSS checker, for example: W3C CSS Validation Service
And, of course, you should have correct doctype in your html file. Without doctype, some browsers go to quirks mode to emulate bugs in old browsers.
A cross-browser JavaScript library, like jQuery and its UI components, can be very helpful in avoiding idiosyncrasies between browsers. Microsoft provides the IE Developer Toolbar, it's not quite as easy to use as Firebug, but can still be very helpful. A Just-In-Time debugger like MS Script Debugger or Visual Studio are also a time saver.
I like Firebug for Firefox
and IE8 has Developer Tools from the tools menu and IE Developer Toolbar for older versions.
Chrome has similar tools from the page menu.
All of which allow you to see elements on the page as they are rendered in their specific browsers, which I usually find very helpful in debugging browser specific problems.