Nowadays it’s hard for Front end designers to develop and test the applications. They need to design the screens, make changes in the source code and deploy the changes each and every time. Here we learn are going to discuss about how to debug web application, analyze the performance of it and making it as responsive by using the Chrome Dev Tools. Which is helpful for the Developers to minimize their work and give the deep knowledge about their web applications.
Living in Atlanta, USA
Living in Atlanta, USA
The Chrome Developer Tools (DevTools for short), are a set of web authoring and debugging tools built into Google Chrome.
We can use the developer tools to
• Track down layout issues
Ways to Access Dev Tools
• Click on Hamburger Menu Select Tools Developer Tools
• Right Click on the Page, Select Inspect element
• Just press F12 to open the Dev tools
About Dev Tools window
Dev tools have different Panels, it is organized based on the type of the operations.
Inspect using Elements
Elements panel will give us the structured information about the current page.
Using Elements we can do the following tasks:
• Inspect HTML & CSS
• Test and edit different layouts
• Live-edit CSS
Using the Resource tab, we can able to see and interact with the HTML files, Scripts , Database, Local Storage, Cookies, AppCache, etc.
Using the Network we can able get the information about each network operation in our application, including detailed timing data, HTTP request and response headers, cookies, WebSocket data and the required resource files to load the page like HTML, Script, CSS and the images.
Using this we can record and analyze the activity in our applications. Also we can check the performance issues if we have anything in our application.
We can able to see the step by step actions like how the application executes the resource files, how it renders/paint the pages, and how it hits the service calls. We can analyze how much it takes to load and execute the functions when an event is fired by the user.
Two modes of console is available
• Console to debug and log the errors and warnings
The Source panel let us to view source files like HTML, CSS and JS
• Using Source tab we can see all the sources which associated with the page/application.
• We can add the source files and edit the files on the go
We can also drag/drop the files from the file location to edit on the go. So your browser will work as like the IDE.
Using the Developer tools we can emulate the screens for the Android, iPhone and tablets. We can test our web application for the devices specific.
Media queries are an essential part of responsive web design. Device mode makes media queries readily accessible and easy for us to inspect.
We can categorize the media queries based on the colors as follows
Blue – Queries with Max width
Green – Queries with in the specified width range
Burgundy – Queries with Min width
Thanks! Your feedback helps us to improve 9lessons.info