Some quick debugging hack every javaScript and HTML developer should know

Well, If you are just starting to code or have done some code in C/C++ or Java or in fact any other language. You have to do the setup before you ever execute the ‘hello world’ program. Maybe while doing setup you might lose interest. it can really be confusing sometimes to perform all those pre-requisite, right?

What if I tell you, You don't have to do anything and can write the code on the fly. Yes, it is possible with javaScript.

Honestly speaking, starting with javascript can really be fun as you can see all the things right in front of your eye. Go to google chrome home page, right-click and select inspect.( shortcut- CTRL+SHIFT+I).

Go to console tab and write. console.log(“hello world”) ; and then hit enter.

Wow, you just executed one program. great.

Now let me show how easy to calculate the sum of two numbers in javascript.

This is fantastic, isn’t it?

Now you can write any code here and debug it on the fly. Below is the snippet of the code to find the duplicate letters in a string.

Note: Press enter after writing the code to see the execution log.

This is cool, isn't it? You can literally run any js code to validate the output.

Another cool feature of the Google developer tool is to check the current HTML/CSS code and make a change to see the live output.

Well, I will use my page to show some of the hack here. you can visit me here, https://wasima829.github.io/coverPage/ ,to see what I do for living ;)

Now if you want to change the work summary content of the page, click the top arrow icon and then click on the content part. Once done you can see where that HTML code is available in the HTML document.

Right-click and edit it as HTML.

Change the description.

Ideally speaking, You do not need to change the HTML content, but most of the time the CSS properties do not come nicely in the desktop browser or mobile browser, hence this technique is helpful for debugging. For example, let’s say, I just had changed the description now if I want to see how it would look if I increase the font and color of the text. I can simply go to the CSS properties and right below code.

And the changes are done. ( Note: this helpful for debugging, and once you are satisfied with the look and feel, then you can make the change in source code).

With the help of google chrome developer tool, you can even check which CSS properties are active on the page.

Last but not the least, you can check how the website would look on various devices using “toggle device toolbar”.

Let me know if this was helpful, happy learning.