What is Chrome Developer Tool?
Chrome's Developer Tool allows you to examine the content/sources of websites. It is of great importance for software developers. We can examine HTML, CSS and JavaScript codes, as well as see the loaded assets of the pages and the loading times of these assets. Chrome Developer allows us to edit website codes and see the changes we make live.
How to Open Chrome Developer Tool?
You can open developer tools with 4 different methods. These are;
Detailed Guide to Chrome Developer Tools
Browser Options-> More Tools-> Developer Tools (Menu-> More Tools-> Developer Tools)
Using the key combination CTRL + SHIFT + I For macOS: ⌘ + ⌥ + I
By pressing F12
Via the context menu: After Right-clicking (Ctrl-click for Mac) on the web page, select Inspect Element from the pop-up menu.
Detailed Guide to Chrome Developer Tools
How to Inspect Pages and Styles in Chrome Developer Tool
Chrome Developer Tools Elements
Chrome DevTools is a web developer tool included with Google Chrome. DevTools helps you edit pages, debug CSS, modify and edit, debug JavaScript, fix problems and analyze performance.
Live Edit a Style
Chrome Developer Tools Css update
When you hover over the written codes, boxes appear and if you uncheck these boxes, we disable that code and can see its effect on the site.
Ways to Improve Loading and Runtime Performance
Would you like to examine our successful works immediately?
Step: Audit the site
If you want to improve the site's load performance, you should first perform an audit so you can see the impact of the changes you make.
Enable text compression
Enabling text compression is crucial to improving page performance.
You can also check compression by examining a resource's HTTP headers:
Click Controls
Click Perform an audit .control button
Leave the settings as they were.
Chrome Developer Tools audits
Click Run audit.
Once you enable text compression, your overall performance score should have increased, meaning your site should be faster.
Chrome Developer Tools Audits Performance
Icons and Their Functions
Element Selection Tool: Used to view the properties of an element on the website. Select the tool and click on the element you want to view the properties of.
View Switcher: A tool that shows you pakistan mobile phone numbers database how a website looks on different devices and different screen sizes.
You can tell if a website is responsive or not. The shortcut key combination is Ctrl + Shift + M.
Chrome Developer Tools Elements
Complete and Quick Instructions for Chrome Browsers
How to Disable JavaScript?
After opening the Chrome Developer settings, click on the ⋮ button in the upper right corner of the developer tools and in the window that opens, click on the Settings option from the More Tools option.
Chrome Developer Tools Javascript settings
Then, by scrolling down the settings window, we see the button to 'disable' JavaScript under the Debugger subheading and we must click on the checkbox.
By clicking on the arrow signs → we can see the long versions of the code.margin and width settings
Find the code you want to change in the styles pane, double-click on it, enter the value you want and you can see the change live. These changes are not permanent, they will disappear when you reload the page.
Computed: This tab shows you all the CSS codes of the page and allows you to edit them.
How to Find the Path of JavaScript Files in Chrome Developer Tools?
The first thing we need to do is open the Chrome Developer Tool with the Ctrl + Shift + I combination.
Let's click on Sources (sources panel).
In the Page panel, we can find everything about the site, such as image code. Just select the part you want to change and double-click.
A panel will open where you can make changes to the right side. You can now see the JavaScript codes.
You can apply any changes you want. You can also see the JavaScript file path here.
Chrome Developer Tools Sources
View Local Changes
To see all the edits you have made to our page:
Click on the changed file in the Incoming Styles section. This will take you to the DevTools source panel.
Right-click on the file and then select Location Changes.
To review the changes made:
Expand second-level items to view before and after changes. A line with a pink background indicates removal. A line with a green background indicates addition.
How to Optimize Site Speed in Chrome Developer Tools?
Resize Images
Reducing the size of the images reduces the loading time of the images, which allows them to load and open on the site faster.
Chrome Developer Tools Audits
Replace const dir = 'big' with const dir = 'small'. This directory contains copies of the same images that have been resized.
Do less main thread work.
The main thread is where the majority of the browser's work is done, such as parsing and executing HTML, CSS, and JavaScript. The Performance Panel is used to analyze what the main thread is doing and postpone or remove unnecessary work.
Click the Performance tab.
Click on Capture Settings .settings button
Set Network to 3G Slow and CPU to 6x slow . Mobile devices typically have more hardware limitations than laptops or desktops, so these settings will make the page load as if you were using a less powerful device.
Click Reloadreload button . DevTools reloads the page and then creates a visualization of everything it needs to do to load the page.
Debugging
debug(getData);
When the specified function is called when the code is written, the Debugger opens and allows debugging to progress through the code.
Chrome Developer Tools Console Javascript Debug
Network Tab: A built-in proxy detector that lets you monitor the page's HTTP traffic both while it's loading and after.
Audits Tab: Allows us to analyze the page as it loads, offering suggestions and optimizations to reduce page load time.
Console Tab: Detects code errors on the page and helps us write code to run it and see how it is done.
Source Sources Panel: Used to debug JavaScript errors and find unused JavaScripts.
Resources Panel: Allows us to see changes made locally on our page.
Network Panel: Allows us to see if resources are being downloaded or uploaded as expected. Shows the properties of the resource, such as the size of the HTTP headers content.
Memory Panel: Allows us to view memory usage and monitor for leaks.
Chrome developer tools are a tool that allows us to examine the building blocks of a website without using any editor. Do you have any paid or free tools that you use to analyze? If so, you can share them with us in the comments.
