user7154576 user7154576 - 4 years ago 92
CSS Question

Terminology about debug the web app

Usually, when we debug web app, we just hover over our mouse in a element, then we right click it and choose "Inspect". What is terminology of this? What is keywords I can use for searching about this technology? I want to read more tutorial to master this debug method since I since it is very very helpful and useful.

Update: Actually I just want to know a element's css class, so then I can display or hide this element.

Answer Source

Developer Console is the most important tool in web development and without it, any web developer can hardly imagine about web page development. It is more important than any IDE we use for development.

  1. Inspecting an element on the browser called Client debugging or UI debugging. This happens on Developer console which comes by default with every browser. You can inspect an element on by mouse right click > Select inspect OR Press F12.

  2. This will open a console at the bottom of the same browser window like below enter image description here

  3. In above image, you can see the element selected is BODY and the CSS aligned with the tag property is visible in the same console under style tab at right-hand side. When you will hover on any CSS property, a checkbox will appear and it will allow you to remove or add the property to selected element.

  4. On the same side, there are multiple options which you can apply on css. Eg. If you want to apply some property on hover, click on the filter and select the state of the element.

  5. This way, you can play with elements on the page and then finalize the element style you are looking for.

  6. Developer console is used not only for CSS and HTML, it also used to debug Javascript. It gives you all the controls needed to debug JavaScript at runtime.

[NOTE: Making changes on developer console does not get saved in the actual file. You must need to copy them to source file and then refresh the page to see them working]

Hope this helps, Cheers!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download