Chrome Development Tools Learning notes (3)

(The last part of the DOM has been supplemented, welcome to Chrome Development Tools Learning Notes (2))

Use the Devtools elements tool to debug page styles

CSS (Cascading style sheets Cascading style sheets) defines the presentation layer of a Web page, and is a style design language that truly separates the Web presentation from the content. This article is mainly about debugging tools, about CSS learning can refer to the W3school CSS section: http://www.w3school.com.cn/css/index.asp.

Devtools the elements to the right, the CSS style applied to the currently selected element is displayed according to the priority level from high to Low:

• The CSS style on the element is defined directly through the Style property (or Devtools).
• The matching CSS style rule. For example, "span" matches the <span> tag on the HTML of the current page.
• Inherits styles that inherit CSS style rules that match the ancestor elements of the selected element.

The description of the 1~7 in the figure is as follows:

2. CSS selectors and styles that match the current element.
4. Multiple identical CSS properties that match on the same element are overwritten first by source, weight, and specificity, and if the precedence is the same, the later defined attributes take precedence, as described in the cascading order in the CSS document. In the Elements tool, the first defined "color" property is marked with a strikethrough, indicating that it is overwritten by overrides.
6. The user Agent stylesheets is also displayed in the Elements tool, the so-called user-agent style, which is the default style provided by the browser, which previously gave interns an aisle title, With CSS styles, the text input text control displays a blue border when it gets the focus, and some people find that the default text control below chrome will show a blue border, in fact, if viewed under Devtools, the blue border effect here, Is the user-agent style set by Chrome, and then look closely, properties like the border of the text control are set up by the user-agent style.
8. Developer-defined CSS styles have a higher precedence than user-agent styles, so the "display:inline-block;" of the developer-defined div in the diagram Style "display:inline-block;" The user-agent style Overrides are overwritten. As mentioned above, the browser will set a lot of user-agent style, in development, we usually use CSS Reset, that is, import a set of CSS style overrides override different browser user agent style, to unify the page display effect. The CSS reset here uses the overriding principle of precedence overrides.
10. Inherited styles appear below the "inherited from [node]" Group, click the node name of the group header and jump to the corresponding DOM node. You can go to the CSS 2.1 properties table to see which CSS styles can be inherited.
12. The specificity of the ":root body" selector is stronger than the individual "body" selectors, so the body"style of the":root "font-size:30px" in the diagram overrides the "body" style.
14. And the top 1.1 like, due to CSS priority, "body 」选择器的 "font-family:helvetica」样式也被覆盖了。关于CSS重写覆盖的优先级，也不多赘述了，百度google上面有一大片。

In the CSS selector, comma ",」被用来表示「或」的关系，即只要满足其中一部分，即被匹配。在Elements工具中，「或」关系的多个选择器中被匹配上的会以黑色字体表示。

In the Elements tool, you can temporarily disable or activate a CSS style by using the left checkbox of the CSS style, and when a style is disabled, the corresponding CSS style in the code is commented. Similarly, the CSS style that is commented in the code, in the Elements tool, is displayed in the disabled state (for example, the visibility style).

In the actual project, it is very likely that an element above defines a large number of CSS styles, we can use keyword retrieval method to quickly navigate to the CSS style you want to view.

Edit CSS Styles

Click the CSS style selector, property name, property values can be set to them, click can insert a CSS rule, personal feel is more like the use of Devtools CSS style modification when the input value automatically fill in the input. For example, a CSS style that makes an element invisible "visibility" may not have a clear spelling, and we only need to enter "v",devtools in the CSS style name in Devtools to help us automatically find the CSS style that starts with all "v". As with the value of the style, Devtools automatically gives the possible values for the corresponding CSS style, which can be quickly toggled and displayed on the page in real time with the keyboard up and down.

Click to toggle the state of the element, and the previous one says right-click on the DOM node to select the "force element state" effect is the same.

CSS Modification History

It is important to note that, as with Dom modifications, all CSS modifications in Devtools are temporary. This means that once the page is refreshed, all changes will be lost. We may need to fine-tune some places repeatedly when we write code. Devtools provides a modification history view tool to help us see the current changes to the CSS and JavaScript on the page. Viewing method is very simple, under the Devtools "sources" tag, right-click to see the history of the file, select "local modifications...". We can see the change in history, the time of the modification, and the diff before and after two changes, and we can roll back the changes.

By the way, if we need to make the CSS changes really reflected in the source code file, you can choose to join workspace to implement. About workspace, in the future will be specifically launched.

CSS Box Model view

When it comes to CSS layouts, it's bound to lift the CSS box model. Remember when the school web design class, but also with table for page layout, but look to the current site, almost all use box model to layout. About the box model, in the book to see a lot of conceptual things, but has been on the margin, border, padding and other concepts are not very familiar. Through the Devtools box Model tool, it can be very intuitive to help us get started with CSS layout.

By setting different values in the box model, we can visually see the effects of the CSS properties of margin, border, and padding on the layout. The cursor moves to different parts of the box model, and the section is highlighted on the page. Can be quickly modified in the box model view, do not need to add PX units, the changes are real-time feedback on the page. When adjusting the position of the elements on the page, it helps us to quickly know whether to modify the padding of the upper element or the margin or other properties of the current element. After using the Devtools hands-on try, and then see the online box model introduction, is not all of a sudden read it?

When setting position to a value other than "static", there will be a position box outside the margin.

reprinted self-Technical blog http://www.cc-lab.cn/chrome-dev-tools-3/

Finish

Chrome Development Tools Learning notes (3)