CSS developed some debugging skills DevTools (Google)

1. CSS selectors search element

You probably know that you can use the built-in function (CTRL + F or CMD + F) search for an element in the Elements panel. But Note the "find" bar, as shown below:

As I pointed out in the screenshot above, you can find elements by a string, selectors and XPath. Before I have been using the string until recently that I realized I could use the selector.

You do not want to use in your CSS selectors used, it can be any valid CSS selector. Find feature will tell you the selector matches any element. This is useful for finding the elements, but also helps test selector is valid.

2. Computed panel allows you to directly edit box model :( developer tools directly edit box model)

If you examine an element on the page, Computed panel next to the right side panel, click the Styles panel. You will see a visual element model illustrating the cartridge, each portion has a value above and edit:

3. css value is incremented or decremented in style panel:

Value may increment or decrement in different ways.

A direction key / down direction keys can be made at an attribute value is incremented / decremented

ALT + up arrow / down arrow keys can be made to attribute values ​​0.1 increment / decrement

SHIFT + up arrow / down arrow keys 10 to cause the attribute value increment / decrement

CTRL + arrow key on the up / down arrow keys 100 can be made to the property value increment / decrement

As shown below:

4.Sources panel text editor features

Guess you like

Origin www.cnblogs.com/xiao-peng-ji/p/11984756.html