Article Sections
When Chrome came out with their developer tools, web development became so much faster and easier. At that time, Chrome had already become the leading web browser. Once I learned more and more about the developer tool suite, I just stuck with Chrome because there was no point in using another browser. I am sure that Firefox and Internet Explorer/Edge have their own versions, but I have no interest in them. Especially IE browsers, there is no point in bothering with them at all. So this article will talk about and highlight the parts of the suite that I use the most and why they really help me produce more faster.
The element inspector is easily my favorite development tool in Chrome. I use this all of the time to check the HTML on a page. I still view the source when I need to see how the HTML looks like on the page on page load. When you need to see how the HTML changes dynamically due the JS events, you need the element inspector.
Without the element inspector, it takes longer to perform simple tasks like changing CSS or knowing which element HTML on a page maps to blocks of HTML in the source. Web development used to be slower because you would have to modify a file on your local server and then refresh the page to see updates.This required using both some kind of text editor to modify a file and then a browser to see changes. So you needed two tools to make page changes. With the element inspector, you can change CSS in the browser and just move it over to some place like a style sheet.
I will explain more later, but it is so much better to change CSS than it was before.
There are a lot of different things that you do in the element inspector:
I will explain each one of these users for the element inspector and why they are useful.
I started to mention this one earlier but I want to dig deeper into it now. If there is an element that you want to change on the page, you just need to inspect it and you will see what the CSS selector is for that element. You also see the CSS properties and values assigned to that element. You can also see which CSS file contains these properties and values.
If you need to make simple CSS changes like changing a value for an existing property, you can change it right in the browser and see the update on the page right away. This is a very nice feature compared to having to change a file and refresh a page. This newer way allows you to test various values and see which one looks best on the page. Then when you like your new values, you can just copy and paste them in your file.
This is great when you are going for “pixel perfect” designs and you need to know exactly how much height or width an element should be. Or, how much margin and padding you need. You can easily just use the keyboard arrows to increment and decrement numeric values one pixel at a time. This is why being able to see changes in the browser in real time is necessary so that you do not have to guess what the perfect values are. In many cases, that one pixel difference is important and may not be visible to your users but will be to you.
As a web developer, I notice when things are off because that is what I do and I will see things that you would only see if you stare at the screen long enough. Something along the lines of being nitpicky but you really have to be because with so many visitors to your website, you never know who is going to see something that is off.
We are talking about when elements are not aligned or centered. The text does not fit in a button. There is not enough margin between elements. There is not enough padding inside elements. Lots of imperfections that a little CSS can touch up and really make your page look better. This is why I like changing CSS in the browser because you can see how much you need easily.
Another feature that I like about the developer tools is the ability to remove sections of HTML. This is helpful if you are redesigning a page and you need to make sure that you safely remove the right HTML without affecting anything else. This can be tricky to do if you have a page with a lot of HTML elements that are deeply nested within each other.
If you do not remove the right sections of HTML blocks, then your page will look off. The element inspect can open and close HTML blocks so you see when they open and close. If you do not correctly remove a pair of open and closed HTML tags, your page will not look right. This also depends on how well indented your pages are. If your pages are poorly indented in your code files, then it can be hard to identify them, even if you find them in the browser via inspect element.
This is why I always indent my code files using tabs and not spaces. I am not sure why some people use spaces. Tabs are much easier to use and they add a good amount of spacing for nesting your code and tags. Unless there is some logical reason, some things will stay a mystery
I also like using the element inspector to see how deep elements are nested. This is very useful when writing jQuery and you need to know how to target a child element that is very deep within its parent. Sometimes you are six, seven or more levels deep. This is when you might have to count how many nested elements it takes to go from a parent to its child.
Another use for knowing how deep tags are nested is when you are writing CSS mouse over states using the hover pseudoclass. Often, you hover over a parent container, but you want to change the property of a child element. In this case, you need to count how deep the tags go down before you target the child element properly.
What I also like about the element inspector is that you can check to see how the HTML changes when JS events are triggered. This helps you know what HTML elements are statically generated at page load and what elements are created after page load via JS. If you need to bind events to HTML elements that are dynamically created, then you can do so using the on function. This is different syntax than a standard binding event handlers for jQuery so take note.
The console inspector is great when writing lots of jQuery that often needs to be debugged. Especially if it is JS that someone has written and you inherited something that is pretty complex and needs some time to analyze, tinker and understand.
When it comes to debugging, we have to start at the top and check the flow of data. That means checking where the data is coming from and ensuring that it is being processed properly before it is outputted. What commonly happens is that along the way during execution, something happens to the data. Either it is manipulated incorrectly or does not enter the correct condition statements for further processing.
This is why alerting and using console.log() are important. If you want to print out just a single variable value, use alert. For objects, use console.log(). You can check the output of your object in the console and make sure that it contains the right data before data processing resumes.
I like using the console to check for basic errors. Sometimes the errors are as simple as a variable being undefined or the value is not of the right type. I like how the console gives you not only what file the error occurred but also the line number.
Test JS Output
When I write JS, I like to check the output as I process it. This is why testing the output is important so that you know the data is correct as your instructions are being executed. This is why I write a few times, test the output and repeat the process. If you write too many lines without checking the data, then you might run into an error earlier on in your algorithm that will require debugging.
So the more that you test, the less that you have to debug. Testing is preventive and debugging is reactive. As a programmer, we try to be as preventive as possible because it prevents errors from going live and having to do debugging after an update has been launched.
Lighthouse is similar to page speed insights but offers a lot more. Page speed insights focus mostly on suggestions to make your pages load faster. For most people, this is mostly what they care about because faster loading pages helps with ranking higher on the search engines. I feel that most people do not use Lighthouse because it is located inside developer tools. This means that most people will not see Lighthouse and they will not even know what it is. Developer tools are mostly for developers and the stuff inside is too technical for other people.
Lighthouse provides reports for the following:
Page speed insights only provides performance, but Lighthouse gives a lot more. If you can, you should try running Lighthouse just to see what stuff shows up for your page.
If your pages use cookies to store data on a user’s computer, you can check for them under the application section. This is really useful because you can check the names and values of the cookies that you create. You can also make sure that you are clearing them properly and see what the expiration dates are for them.
If you are using the same cookies between pages, then you can make sure that your cookies are still working, Especially if one page sets up cookies and another page modifies them. You can ensure that your cookies are being handled properly among your pages.
Developer tools allow you to change the screen orientation of your website using a device simulator. So you can check your pages on mobile, on either a phone or a tablet, portrait or landscape. This is crucial when using CSS media queries to style pages for desktop, phones and tablets. Of course, this is just a simulator so it is not one hundred percent perfect. For the most part, the device simulator is pretty accurate and reliable.
Chrome development tools are really handy and make web development a lot easier than before. Without it, it takes longer to identify HTML elements for both CSS and JS modification. So developers can spend less time finding stuff and more time actually making changes.
The element inspector is the best tool available and quickly maps elements to their HTML blocks with no trouble at all. It is amazing how good this tool is. Other tools include the console for JS, Lighthouse for speed reports and application for cookies.
Let us also take note of how useful the device screen simulator is for doing responsive design.
Developer tools is truly a useful suite that no developer can live without.. Thanks to developer tools, we can make a clean, simple, working website without having to go through so much trouble.
Introduction I already wrote an article on what to do when your articles are not…
Introduction I have an old blog, www.stufftuanlikes.com. This was a hobby blog that I created…
Introduction The Internet has changed our lives and I have written many articles about it.…
Introduction Writing even the most technical of subjects in a way that anyone in your…
Introduction Blogging can be great fun and I have written several articles about my experience…
Introduction As a web developer, I rely heavily on documentation when implementing new solutions. When…