Secrets of 25 browser development tools

Document directory

• Reference current element
• Use console. log to output multiple values and objects simultaneously
• Persistence
• View object sources
• Change Frame
• Copy your code directly to the clipboard
• Let the Browser Do computing
• Process compressed scripts
• Monitoring variable
• Edit and execute JavaScript code in real time
• Create a breakpoint when an error occurs.
• Creates a breakpoint when the DOM changes.
• An easy way to get a container size
• Show all element views
• Add margin, spacing, height, width, border-or even color
• Set the style for: active,: hover,: focus,: visited status
• Rotation color definition type
• Color Picker
• Save your changes
• Cookie and storage
• Disable browser cache
• Latency
• Domcontentloaded and load event trigger
• Crash

Original article: http://www.andismith.com/blog/2011/11/25-dev-tool-secrets/

Author: Andi Smith

Translation: Secrets of 25 browser development tools

Development

Browser development tools have been the most effective tool for Web developers over the past few years. It can work in harmony with Web browsers, allowing us to operate DOM elements, CSS styles, and Javascript in real time in the current window, and get some other useful information.

In the past, developers used a firebug extension in Firefox to develop and debug their websites. However, recently, various browsers have developed a set of their own tools, and each has its own strengths and weaknesses. It is hard to imagine how to build a website without these convenient tools.

To activate the development tool, press the "F12" Key (CMD + Option + I for Mac), or right-click the page and select "review element" from the pop-up menu ".

Browser	Development Tool Set	Type	Document
Chrome	Developer Tools	Integration	Documentation
Firefox	Firebug	Extension	Documentation
Internet Explorer	Developer Toolbar	Integration	Documentation
Opera	Dragonfly	Integration	Documentation
Safari	Developer Tools	Integration (disabled by default)	Overview

Have you fully realized the potential of these tools? Development tools are easy to use, but developers often miss most of their functions. Inspired by Paul Irish and Pavel Feldman's video conversation, I listed a list of "secrets" about the development console. I don't expect every one of them to be unknown to you. I just want some of them to help you become a better web developer.

If you have more "secrets", please leave a message at the end of the article-once I confirm, I will update this article in time. I also want to know which development console is your primary development tool. You can also leave a message below.

Console tab reference current element

Chrome, Firefox, opera, Safari-If an element is being selected on the "element" tab, You can reference "$0" to call it in your code. For example, to view the content of the selected element, you can enter "$0. innerhtml ". In Chrome and Safari, you can immediately switch from other tabs to the console by pressing the "ESC" Key (when the development tool is enabled ). In firebug, you can click the icon on the left of the tab on the console, or press Ctrl + Shift + L to switch between them (CMD + Shift + L under MAC ).

In opera, you can use "$1" to reference elements. In Chrome and Safari, you can use ~ $4 "references a forward element.

Use console. log to output multiple values and objects simultaneously

All browsers-We all know that,console.log()This method is useful when debugging information is output to the console, especially when compared with alert. But when you want to output a string followed by an object, the output format will be annoying. For exampleconsole.log('message:' + $('#message'))It will only tell you that the message is an object (* Note: The output result may be "message: [object]"), and if this process is in a loop body, object Representation is confusing.

console.log()You can actually receive multiple parameters, so you can output both strings and objects:console.log('message:', $('#message'));Or other JavaScript type combinations that you can think.

You can useconsole.warn()Output warning message; Useconsole.error()Output Error message; Useconsole.info()Output information message. You can also useconsole.assert()To detect whether the expression is true or false.

(Thanks to masklinn for providing this information)

Reuse Javascript commands

All browsers-If you have entered a command to the Javascript console and want to run it again, simply press the arrow key "Seek" to roll back and forth the command you have called.

Persistence

Chrome, Firefox-There is an obvious persist button on the top of the firebug console, but it is slightly hidden in chrome-you need to right-click the console, right-click the pop-up menu and select the "Preserve log upon navigation" option.

* Note: The console retains the output console information after refreshing the page.

View object sources

Firefox-Firefox supporttoSource()Method, which means that you can directly call this method in firebug to print the string representation of an object.

Change Frame

Firefox-It is very useful to directly run JavaScript commands on the console, but if you use IFRAME content on the page, it will become troublesome. Fortunately, you can use the following "cd" command to enter the specified IFRAME environment and run your command again:

cd(window.frames['frameName']);

* Annotation: for examplecd(window.frames[0])It will enter the execution environment of the first IFRAME and display an info message: ["current window:", window sample.com]. At the same time, the upper layer can be returned:cd(parent)

Chrome-Chrome allows you to change the frame in a different way. Click the drop-down menu at the bottom of the console to switch:

Opera-In opera, both the console and document option cards have a drop-down menu for switching frame. The drop-down menu in the console is only displayed when frame is available:

(Thanks to Paul Irish and Daniel for providing this information)

Copy your code directly to the clipboard

Chrome, Firefox, Safari-Use in the consolecopy()Command to directly copy the content to the clipboard.

Let the Browser Do computing

All browsers-This technique makes sense, but it is surprising how many people will not use it. When you want to quickly know the answer to a mathematical calculation (for example, How wide is a 456-pixel-width container in three columns ?), You do not need to open a calculator and enter it in the console to return the answer immediately. By the way, the answer is 152.

* Note: This is not a bot. The o_o author should directly input the expression in the console:456/3

Script Tab

All the scripts on the page are stored. This tab contains a drop-down menu that allows you to select the script you want to debug.

Process compressed scripts

Chrome, Internet Explorer, Safari-Placing a breakpoint in the Code makes debugging easier. If the script has been put into the production environment, it may have been compressed. How can you debug compressed code? Fortunately, some browsers have an option to decompress your JavaScript code.

In Chrome and Safari, simply select the script tab, select the relevant script from the drop-down menu, and click the "{}" (pretty print) icon on the bottom panel:

In ie9, click the tool icon next to the selected script to format the JavaScript code:

Monitoring variable

All browsers-As a common tool in. NET development, "monitoring" allows you to observe a group of variables in a convenient area on the top right of the script tab. It's easy to observe a variable. Just enter its name and "Monitor" will keep it up-to-date.

Edit and execute JavaScript code in real time

Chrome-In Chrome, you can directly edit the page without using a separate editor or reload the page. Double-click the code you want to change and enter the new code! Press Ctrl + S (MAC, CMD + S) to save.

Create a breakpoint when an error occurs.

All browsers-When the first script error occurs, simply click the pause icon on the script tab. The error line is highlighted for viewing.

Creates a breakpoint when the DOM changes.

Chrome, Firefox-If you know that the page crashes when the DOM of a specific part changes, or you just want to find out which script has changed the attribute of an element, both chrome and Firefox provide effective methods to set breakpoints to find out the culprit. Simply select the element you want to monitor, right-click it, and select the interrupt condition:

(Thanks to Jason Wilson for providing this information)

Element Tab

Firefox is called the "html" tab, and opera is called the "documents" tab. The elements tab displays the DOM in the current state. In IE, You need to click "refresh" to view the current Dom.

An easy way to get a container size

Chrome, Safari-I am a container that contains floating elements.overflow:autoStyle fans-the earlier version of IE will cause trouble unless you specify the actual width of the element (auto and 100% are not enough ). Although the actual size of the element can be seen in the "computed style" column in the upper-right corner of the element tab, you still need to click it several times. In Chrome or Safari, a better way is to hover the mouse over a specific element of the HTML source code in the element tab, or click the magnifier on the toolbar at the bottom and then hover over a specific element on the page:

Firebug, Internet Explorer, opera-You need to select the layout tab on the right side of the development tool, or view it in computed styles on the right side bar.

(Thanks to masklinn for sharing this information)

Show all element views

Firefox, opera-On the HTML tab of firebug, press the asterisk (*) key on the keypad to expand all the selected elements. By default, the script tag and STYLE tag are not expanded unless you press SHIFT + * at the same time.

Opera-There is a button under the "documents" tab of opera to do this:

Add margin, spacing, height, width, border-or even color

All browsers-If you want to change the margin, spacing, and height of an element, you can use the cursor key (the direction key) to increase or decrease the size:

• Press the upper or lower keys to increase or decrease Unit 1.
• In Chrome, firebug, and Safari, holding down the Shift key and then pressing the top or bottom key will increase or decrease the Unit by 10. The page-up and page-down keys have the same effect)
• In Chrome and Safari, when you press the Alt key and then press the top or bottom key, the unit is increased or decreased by 0. 1.
• In Chrome and Safari, pressing the Shift key and then pressing the page-up or page-down key will increase or decrease the Unit by 100.

These shortcuts are especially useful when you are not sure which sizes are used for style. In Chrome, firebug, and opera, you can also use these shortcut keys to modify the color value.

* Note: You must double-click the style on the right of the element tab to edit it.

(Thanks to mikkelrom for sharing this information)

Set the style for: active,: hover,: focus,: visited status

Chrome, Firefox, and opera-The operation style on the console is really great, but testing the hover style is troublesome. Fortunately, there is a solution.

Chrome has a built-in button to do this. On the right side of the element tab, there is an icon with dotted box and optical mark, which is used to edit the state style:

In firebug, click the arrow menu next to the style tab on the right and select the status you want to edit.

In opera, the style tab contains an icon that looks like a list.

Rotation color definition type

Colors in chrome and Safari web pages can be defined in multiple ways-by name, hexadecimal number (3 or 6 digits), RGB or HSL (both have alpha-transparent versions ). In Chrome or Safari, you can switch between several types of definitions by clicking the square icon next to the color value.

(Thanks to masklinn for sharing this information)

* Note.

Color Picker

Opera-In opera, just like above, click the square icon on the right of the color value to bring up a convenient Picker:

* Note: Here is another tool that automatically converts the HSV color to the RGB color.

Resource tab

Resources tab list all the style sheets, JavaScript files, and images used on your page. Unfortunately, this tab does not exist in IE and firebug, although some features of this feature are integrated in their other tabs.

Save your changes

Chrome, Internet Explorer, Safari-It is nice to edit styles or Javascript in real time in tools. But it's not that nice when you make changes happily and then implement them again in the source code.

In IE, each tab provides a "save" icon. Its function is to save and modify it to a file.

In addition, the resource tabs of chrome and Safari provide a considerate function: it saves the version you modified each time (after pressing CTRL + S ), you can also view the changes of each version either forward or backward. An arrow icon appears next to the file name you modified, indicating that it can be expanded/collapsed to view the list of modified versions. In Chrome, right-click the file name to save the file. However, in Safari, you can only copy and paste files in tragedy.

Cookie and storage

Chrome, opera, Safari-The resource list in the lower half of the resource tab represents various data storage options. Opera has a separate storage tab.

Network Tab

The Network tab displays all file resources loaded on your page. In most cases, after you open it, you need to refresh the page to display the information you want to see. In firebug, the tab name is "Net ". For IE, it is not available until version 9.

Disable browser cache

All browsers-Cache can be disabled in each browser, but the methods for disabling the cache are inconsistent.

In Chrome, click the gear icon in the lower-right corner of the development tool to set it. In firebug, set the arrow drop-down menu next to the network tab. In IE, set the Save menu item on the menu bar.

In opera, to clear the cache, click the network tab, select the second tab in the Network option, and select the first option. In safari, disable caching in the "Development" menu bar.

In Windows, you can press Ctrl + Shift + Delete in the browser to call the delete cache dialog box.

(Thanks to Steven and Karl for sharing this information)

* Note: I did not find it in opera. Only the settings/history tab is available.

Latency

All browsers-The network Tab allows you to view how long the server took to respond to a request. The light fill section corresponding to each resource indicates when the request is sent and when it is returned. The dark filling part indicates when the resource is downloaded. In Chrome, You can hover over each time line to obtain specific time-consuming information.

In opera, the delay representation principle is the same, except that it uses gray lines, while Chrome is filled with light colors.

In ie, the latency is marked yellow and hovering over the time line also gets more information.

In firebug, latency is marked as purple, and the term is "Waiting ". Hovering over a time line can also obtain detailed information about time consumption.

Domcontentloaded and load event trigger

Chrome, Safari-The network options in chrome and Safari also display two additional information items. The domcontentloaded event trigger time is represented by the Blue Line, and the load event trigger time is represented by the red line.

The line represented by domcontentloaded indicates that when the browser has completed parsing the document (but other resources are not downloaded yet ), the load event indicates that all resources have been loaded.

If both events occur at the same time, the line is purple.

(Thanks to Steven and Joey for providing this information)

Other crashes

All browsers-Sometimes I find that the developer tool crashes or the response is lost when you click the mouse. I also often find that using the keyboard shortcut to close and re-open the development tool can solve this problem, without the need to close the entire browser and re-open it.

I hope these features and secrets will help you. I intentionally did not include performance analysis and remote debugging in this list. It will be covered in my subsequent articles. Please feel free to give feedback, pick up mistakes, or leave your skills below.