Unleash power of Dev tools in browser - 1

Published:
Developer tools in browsers have been around for a while, yet they are still heavily underused by developers. Developers still fix html or CSS then refresh page to see effect, or they put alert or debugger in JavaScript and then try again and again trying to fix the issue. In this walk through I will cover few most helpful tools available. I am using Chrome and a sample ASP.NET MVC application
 
To open the developer tool you have following options:
  1. Keyboard short cuts – Cntrl + Shift + I/J/C or simply press F12
  2. Right click on page – Inspect element

Chrome's developer tool looks like
1.pngThe top menu has several option to enable you focus on specific page information.2.pngElement
This is to inspect/modify page's DOM tree (HTML and CSS). You can modify HTML and styles here and see the change without the need to reload the page. The modifications do not effect your source files; the changes are local to your browser. Refresh/reload will undo changes made on the browser.

To view HTML DOM
Right click on the element and select the one you want to inspect or click on the magnifying glass on top left, and then move the mouse over the element you want to inspect. When you inspect any element you will see this:
3.pngThe left panel shows the DOM and the right panel the CSS Style of selected element. By default the HTML of other elements are collapsed; to open/collapse them click on the black triangles.
4.pngTo Modify Element
You can edit, add and delete attributes, and edit the values of elements or attributes. In the Element window, view a particular element and double click on it to make it editable. If you click on element itself, you can modify an element, for example changing
to  and the closing tag is automatically updated.

Double click on Value to change it. After making the required change just click outside to update the DOM and view. This works similarly on attributes. You can edit or delete an existing attribute or add new attributes. The effect of changes will be displayed to you in the view immediately.

Right clicking on any element in Element window gives you more options:
5.pngPlease note these option change depending on what you have clicked, i.e. it show different options when you click on attribute or value.

CSS editing in Element window
Another major feature of the Element window is ability to edit styles associated with elements. The right panel shows you the net effective style of an element. You must have basic idea of CSS works in terms of priority and inheritance. If you are not sure about it, please visit this.

In simplest terms styles have priority based on where they are written. A style written with the element inline has a higher priority than a style applied through a CSS rule (via selector or class name). Styles are also passed from parent element to child elements.

Styles in the right panel show styles:
6.pngStyle window shows you all from highest to lowest priority. Let’s explore this in more detail with few examples
7.pngIt tells about style applied due to selector. Above example shows that we have a CSS style applied on paragraph element with the style defined in our page/external CSS file. Information in orange box tells about the CSS file; this information is a hyperlink to that style definition. If you click on this it will take you to style definition. (Next time you are looking for a style definition this will come handy).

In this example you see it CSS?v=….. Because CSS is bundled in this particular project.
8.pngThis style is “user agent style sheet”. These are default styles that the browser applies by itself if the HTML does not contain any styling.

The CSS specification says that “conforming user agents must apply a default style sheet (or behave as if they did)” and that “a user agent’s default style sheet should present the elements of the document language in ways that satisfy general presentation expectations for the document language". Most the time we write styles to override this behavior.
9.pngDue to style inheritance, a child element gets the style of its parent if not overridden by the child. For example, any strikethrough property implies that particular property has been overridden by other style. Due to style inheritance, child element get style of their parent if not overridden by them. Any strikethrough property implies that particular property has been overridden by other style.

Editing Styles of element
Styles other than user agent styles can be edited from style window. Double click on name to edit the name, or value to edit the value. When you move your mouse over any property of any style you will see a check box being displayed along with every property, Unchecking the checkbox will remove effect of that property, and this comes very handy to verify what property of which style is causing the problem you are trying to resolve.
10.pngAdd new property
Add new property by clicking on empty space in any of style.
11.gif
Other features of Element window
  • Scroll to View- If page is large and while exploring DOM you navigate to an element that is not visible in current view due to scrolling, you can right click on element definition and select scroll to view to scroll to it in view.
  • Drag and drop in the element window let you move an element to another place in page.
So next time you want to update your HTML, you can do it using Element window. Try all variations and fix it in one go.
2
1,580 Views

Comments (0)

Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.