Performance Tools
Performance is recorded at runtime and tells how the page performs when it is running, as opposed to loading. The tool gives a general insight into how good is the site’s general responsiveness. It also measures the JavaScript & layout performance of the site. The tool creates a recording/ profile, of the website over a period of time, the tool is made to run. An overview is created using the RAIL model, listing all the frames of the browser activity which has been done to render the website.
Application:
- Simulating a mobile CPU
- Recording runtime performance of our site
- Analyzing frame per second
- Finding the bottleneck capacity
- Animating CSS properties
Browser Developer Tools
Every web-developer needs some basic set of tools for understanding the underlying structure of the code and enables us to inspect the web content. Developer tools are built directly into the browser. These are the tools that are browser dependent. Most of these tools are common among various browsers and do a range of things, from inspecting elements of a currently-loaded HTML, CSS, and JavaScript. With developer tools, we can directly interact with the source code that is fetched into the client side of our system. This article will explain such basic functionality of the browser’s devtools.
Across all browsers, the basic functionality of the developer tools remains the same, only naming conventions and terminologies changes. In this article, we would be focusing the majority of sections on two popular browsers Firefox and Chrome.