Scribd
Upload
23 views

03-Developer Tools and Debugging

Uploaded by

Gaurav Sharma
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
23 views

03-Developer Tools and Debugging

Uploaded by

Gaurav Sharma
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Developer Tools and Debugging

Browser Developer Tools

● You learned about chrome developer tools. Many modern browsers that you
see today have developer tools built into them, these are called browser
developer tools. They all work in a similar way. For example Mozilla Firefox,
Microsoft Edge, Brave, etc.
● These are powerful tools for web developers for a variety of purposes.

Uses of Browser Developer Tools

● They help you understand a web page structure (basic HTML), and styling
(CSS) of various elements by inspecting them.
● They help in modifying the HTML and CSS of the page to experiment with
the looks of the webpage for trial purposes.
● They help in debugging code.

Note: They also help you understand the javascript code and functionality
associated with it. You’ll learn more about this in the upcoming lectures.

Debugging

Sometimes our code doesn’t behave the way we wanted to.


For example, we applied black text color to a heading but it appears to be blue in the
browser.
So what went wrong over here?
How do we know the underlying reason for it?
Lastly, how to fix it?
So browser developer tools are very helpful in such cases where debugging is
required.

How to debug CSS code?

Let’s say you have a simple web page as shown below. The text color of the list
items is blue. But you coded it to be green. Now you wish to understand why it is
appearing blue while you coded it to be green. Here we have used Microsoft Edge
as our browser. Similarly, you can use developer tools in other browsers as well.
● Step 1: Select the HTML element that you want to fix, then right-click and
select “inspect”

● Step 2: Under ‘Elements’ you’ll be able to see the HTML code highlighted
with respect to the HTML element that you selected to inspect. Here one
<li>..</li> is selected. You can click on it to expand and see its contents.
Below you can see ‘Styles’ where you’ll be able to see all the styles applied to
the selected element.

● Step 3: Examine the styles applied carefully.


Points to Note:
- You can see the CSS rules applied to the selected element are in a
specific order of most-to-least specific. As:
- The <li> is present inside <ul>. The <ul> is present inside a <div>. The
<div> is present inside <html>.
- The most specific is the CSS rules applied to <li>.
- The least specific is the CSS rules applied to <html>.

● Step 4: Come to a conclusion after examining the styles


- The text color green is applied to <ul>, but its content still has blue
color because <li> is more specific than <ul>. The color applied to <li>
is blue, hence the final color that appears is blue. Now we know where
the problem is, and we can fix it by changing the text color of <li> to
green.
In conclusion,

- Browser developer tools arrange styles applied to an element in order of


most-to-least specific. The above example was very simple. But in huge
and complex websites it gets very easy to figure out styling-related
problems by inspecting.

- In Step 3, you can see some styles have strikethroughs. For example in
<ul>, color: green;
This means you coded <ul> contents to have the color green, but the
browser didn’t apply this color, since some other more specific styling
(that is applied to <li>) overrode this value. Hence developer tools help
us figure out such scenarios helping in debugging.

Note:

You don’t have to master using Browser Developer tools in one go. As you keep
practising you’ll learn with time.

In general, if you ever face any issues with Chrome Developer Tools or if you want to
learn more, you can refer to its documentation whenever required.
● Documentation
● MDN Article on Chrome Dev Tools

You might also like