If you are looking for a tool or application to debug your website, fromwe tell you how to use Google Chrome Dev tools . Since it is a totally free, very complete and also easy to use alternative. This will help you improve different aspects of your page. Let's get started.
What is Google Chrome Dev Tools?
Dev Tools is a set of tools for web page development and debugging, which is integrated into Google Chrome.
This application has multiple functions. In its main panel it will give you some options to work with HTML, CSS and Javascript while they are running within your site.
Its panel is very comfortable and easy to use even for beginners.
If you are a web developer, this tool can help you to do your work efficiently. Learning how to use it is quite simple, but we will give you a short guide so that you can easily achieve it.
Sign up for Dev Tool
To access Dev Tools from Google Chrome, go to the cambodia telegram data menu, select the 'More tools' option, and then Developer Tools.
Then right-click on any element of your website and choose the Inspect option.
You can also use the Ctrl+Shift+I key combinations if you are using the Windows operating system to open the tool.
Know what's on the panels
Below we will name and explain the functions of the components or panels in Dev Tools.
Device Mode: You can use this option to check which website has a good responsiveness and can adapt to mobile devices. It will help you improve this option.
Elements: This option shows you the different components or elements of the website. From here you can modify some aspects of your site.
Console: This panel allows you to record information during diagnostics. It also allows you to interact with your website's JavaScript code.
Sources: Debugs Javascript code and allows you to work with local files.
Network: Using the Network panel you can obtain data, monitor and improve the performance of your website.
Timeline: Allows you to improve the page execution time. You can analyze it by recording the daily actions of the page.
Application: Responsible for inspecting the resources that must be loaded such as images, local and session storage, cookies, application cache, and others.
Security: Detect any security issues in your code. You can debug issues with mixed content, your certificate, and others.
Post: 8 SEO tips you should apply in 2018 – Part I
How to use Google Chrome Dev Tools
This Chrome tool is often overlooked by developers, not taking into account all that it allows them to do. Plus, it's completely free.
Below, we will tell you some very interesting ways to use Dev Tools on your website.
Check if your content is accessible
If you have a website, it is very important that you check if the content you are sharing on it is being crawled by search engines.
Sometimes Google takes a while to detect and display the content of some web pages in its SERPs. This happens for various reasons. But with the DOM (Document Object Model) option offered by Dev Tolls you can avoid this situation by using one of the following functions:
It reviews various elements related to the content, such as the meta title. It also does this with the content that is part of the main page of the website.
It tells you whether or not Google can crawl your content. If not, it shows you some of the possible reasons.
It is important that as a web developer you make it easy for search engines to find your site by making the process as simple as possible.