How did I troubleshoot the coding issue?

Hi All,

I want to share my experience on how I started to resolve the coding issue while coding, and I hope some of you will find it useful.

Basically, while I was coding mainly it worked while I was in the middle of coding CSS, I found it is little hard to troubleshoot the issue that I see on the screen. I used to change one code — no result, then another — no result, etc., and kind of went through lots of guestimation to try finding the source of the issue. But I found this at least takes too much time…

As I was learning to code on “Devslopes”, I observed how the teacher on the video was using the “Dev tools” to find the item and make the change by typing the code on the “ Dev Tool” window and seeing the instant result if that actually solving the issue or not.

This is how “DevTools” look like on Windows OS:

 

So I started to use it. Was a bit hard at the beginning “Dev Tools” interface works in its own way compared to the coding software we use generally, I use VS Code for example.

Here is an example of how I troubleshoot using “ Dev Tool”:

Let’s say I have a problem with the color or size of the H1 element.

1. I would bring the cursor on top H1 element
2. Right-click the mouse and click on the line called “inspect” ( on Windows systems)
3. There is a new window that opens and you will see lines of codes like this:

 

1. In this example, I would see already applied code for the “H1” element under the tag “Styles”. (Looks like this per the above image)

element.style {
}
.main-page-text h1 {
    width: 65%;
    line-height: initial;
    margin: 0;
}
h1 {
    font-weight: 500;
    color: var(--font-color-dark);
    font-size: var(--fluid-size-3);
}

1. click and start typing your new code where it says, “element.style” in gray and you should see the change on your screen immediately. (In this area)

element.style {
}

1. Conditional: If the code you typed didn’t solve the issue, then hover over your code, and a checkbox will appear, unselect the checkbox OR delete your last code and type your new code.
2. After you see your code fixed the issue, copy the code and paste it to your file where your permanent codes are saved

That’s it! Note, that the code you write onto the “Dev tool” will erase after refreshing your page, so copy it always after you resolve make sure to do step 7 above.

I hope reading this article was helpful. Happy Coding 🙂

Best, Iskandar @ iCreator

Read on Medium.com