Web page Production Tips Tutorial: Learn about the browser's own development tools

Article Description: How much do you know about the browser's own development tools?

Conventional

Find development tools

Shortcut:

• "F12" (Windows)
• "CMD" ⌘+ "Option" + "I" (MAC)
• Right-select "Inspect element check elements"
• Safari needs to enable development tools in Preferences > Advanced > Display Development menu
• Firebug is a Firefox extension that needs to be installed here

With the latest development version

Development tools are constantly being perfected and can be experienced in the development version. Chrome Canary is an experimental version of Chrome, and Canary and chrome can be installed at the same time. You can use the Enable chrome://flags Developer tools experiments (Enable development tools experiment) by further strengthening your Chrome development tools. Don't forget to click the "Reboot Now" button at the bottom of the page.

Firefox Aurora offers a preview of Firefox's latest features. Unfortunately, Aurora cannot be opened with Firefox at the same time.

Webkit Nightly is a Safari beta, so some are unstable. Webkit Nightly can run at the same time as Safari.

Opera Next is the latest version of opera, which will provide some new functionality and features.

Now the browser's publishing cycle is 12 weeks, the browser automatically updates, the change is incremental.

Mobile development tool Location

Sometimes we don't want our tools at the bottom of the screen, most of the development tools provide configuration options.

Chrome development tool, the lower left corner icon allows you to change docking settings. Click it quickly and switch between the bottom and the right. You can also click and drag the Mobile development tool by selecting the Dock option (independent window open).

Firefox and Safari development tools, docking options in the upper-right corner near the position of the Close button, you can open a new window.

To change the docking position, click on the small bug in the upper left corner and select the Firebug interface position (up/down/left/right). Firebug the upper right corner can be quickly selected: minimized, new window, closed.

Design of debug response for development tools

When you debug a mobile site, dock on the right to make the most of the space, and you can quickly adjust the browser viewport and development tool width, debug different page width.

In the lower left corner of the Chrome development tool, click on the button to toggle the lower or right docking position.

In the lower right corner of the Chrome development tool, click and select "General" tab, you can change the appearance of the tool, docked to the right side can display the panel vertically.

Learn shortcut keys

Chrome shortcuts are listed in the Settings menu, click on the lower right "gear" icon, you can see the "Shortcuts" label.

IE's shortcut key is online. aspx.

Opera's shortcut keys are also in the Settings button.

Console Console

Log, Info, Debug, Warn, Error

Console.log () is an extremely useful output debugging tool when alert is not required;

Console.log () is a printf style, so you can do this: console.log("%s is %d years old.", "Bob", 42) .

can use console.info() output hint information, output console.debug() debugging information, console.warn() output alert information, console.error() output error message.

You can also use the%c mode to take the second variable as a style format parameter. For example:

console.log("%cThis is green text on a yellow background.", "color:green; background-color:yellow");

Firebug only the icons displayed are different, the background color of the message is the same.

According to MDN's message, they disapprove of using console.debug (), so there is no icon logo, in favor of Console.log () instead.

Chrome and Safari (nightly) Use info without icons, display the Blueprint when debug, display a yellow icon when using warn, and display a red icon with error.

You can output multiple values, separated by commas, to easily output objects and arrays on the same line, for example:console.log("Kings: ", kings);

Output data table

Console.table () can be used to output an array or list of objects, displayed in a suitable tabular form.

For example, console.table([[10, true, "blue"],[5, false]]) the following format will be output:

If the number of elements does not match, the table will show undefined that there is no data.

Custom column names, which must specify elements in the object. indexthe value of the custom (), which can be named for each property.

The Second optional variable allows you to explicitly specify which column to output.

console.table({ "London":{population:8173194, country:"UK", elevation:"24m"}, "New York":{population:8336697, country:"USA", elevation:"10m"}}, ["population", "country"])

The results are as follows:

Assert

Console.assert () is used to test the authenticity of an expression.

It has two parameters: an expression and display information. If the expression is FALSE, the information is displayed.

For example: console.assert(!true, "This is not true"); the output "This isn't true". console.assert(true, "This is not true");nothing is output.

Using the console Timer

Use console.time(label) , the timer starts at the console. String label is a must, and we want to stop it when there is a timer reference. The console.timeEnd(label) number of milliseconds performed by the console output timer (identified by the label) is stopped by the call timer.

Persistent console

Sometimes when the page loads, you need to keep the console information. Sometimes we need this as a reference or to view the log when we click or leave the page.

In Chrome, right click on the console, show the menu has "Preserve Log upon navigation", select it will save your console content.

Firefox defaults to save console information. You can click the "Clear" button in the upper right corner to clear the console log, or turn on/off the tool.

In Firebug, there is a significant button to keep the console content on top of the console.

Opera defaults to saving console content, and you can right-click the console log or reboot the tool by right-clicking the "clear console".

Rerun command

If you've entered a command in the JavaScript console, you want to rerun it, simply click on the "up" arrow to look at the original command list.

Any Tab to open the console

In Chrome, although the console has its own tab, press the "ESC" key at any tab to open the console, so you do not have to switch tab.

Safari console at the bottom of the development tool, the ESC key is used to toggle the visibility of the console log. Executing a command at the command line also opens the console log.

In Firefox, quickly switch to the console: "Ctrl + Shift + k" (Windows), "cmd⌘+ option⌥+ K" (MAC).

Change the focus of the frame

Using the command line to run JavaScript is very useful, but if the page has an IFRAME, you don't know how to locate the frame, it's hard to do.

In Firebug, you can use the following command to focus the frame: CD (window.frames[' FrameName ');

Chrome can change the frame in the Drop-down list at the bottom of the console.

Opera has a drop-down menu that changes the frame in the console console and documents.

You can document.getElementsByTagName("iframe"); get a list of IFRAME by getting it.

Referencing the current and previous elements

If your "Elements" tag chooses an element, you can use it to $0 invoke it. Try the input $0.innerHTML .

In Firebug and Opera, you can use the $1 previous element as a selection.

In Chrome and Safari, you can $1 - $4 choose a more forward element.

In Firebug, you can $n(2) - $n(5) choose a more anterior element.

Final evaluation Expression

If you need the result of the previous expression to be used for the subsequent evaluation, you can use $_ the convenience and the final expression result will be automatically displayed to you.

Firebug 1.12 began to support.

Check

Navigating the DOM through breadcrumbs

When you check the nodes of the DOM tree, the node's DOM path crumbs list is displayed in the development tool.

Chrome and Opera are displayed at the bottom of the DOM checker.

Firebug,firefox and Safari are displayed at the top of the DOM checker.

You can click on the node directly or press the arrow keys to navigate the crumbs. The left arrow is the parent node, and the right arrow is the first subkey. The up and down arrows navigate to the next or previous child node. There are no more child nodes, and the up and down arrows navigate back to the DOM tree.

In Firefox, you can right-click the breadcrumbs to see the sibling list, and you can quickly navigate to sibling nodes.

In Safari, you can left-click the breadcrumbs to see the sibling nodes.

Search DOM Nodes

In Firefox, you can search for special nodes in the Inspector panel. A small search box on the right side of the crumb has the same effect.

The search box becomes larger when focusing.

Enter a matching selector and the DOM tree will automatically highlight it.

In Chrome, you can press Ctrl-f to open the dialog box and the CSS selector works as scheduled.

Check fonts

Firefox has a font checker that lets you view the fonts used by the current element.

You can modify the default "ABC" text and have a button at the bottom of the font list to display all the fonts on the page.

Browse your response Web site

In the response design era, the most important thing is how to view our website in any size device. Although we can resize the browser, there are some other tools available in the development tool.

In the "Settings" pane of the Chrome development tool (click on the gears in the lower right corner of the tool), in the "Overrides" tab, you will find the "Device Metrics device Metrics" option where you can specify width and height, and font scaling dimensions. You can dock the development tool to the right and adjust the page size test.

The Firefox development tool has a ' responsive design mode ' tool built into the upper-right corner of the development tool. It contains some preset sizes, and you can add the size you want. Firefox also provides the option to rotate, and you can test landscape and portrait patterns.

3D View

Firefox Development tools can view your site in 3D view, you can easily see the element nesting relationship, click the development tool in the upper right-hand corner of the cube icon to start it.

Edit

Change CSS values

If an element needs to be modified margin,padding,width or height, you can use the arrow keys to increase/decrease the size. Simply use the UP and DOWN ARROW keys to increase/decrease by 1 units.

"Shift" + Up and DOWN ARROW keys, you can increase/decrease 10 units, "ALT" + Up and DOWN ARROW keys, you can increase/decrease 0.1 units.

"Shift" + page-up/page-down can increase/decrease by 100 units.

These shortcuts are very useful when you're correcting the size.

Change: Active,: hover,: Focus,: visited State style

It's cool to modify CSS in the development tool, but it's a bit of a scratch to bump into pseudo classes like hover. There is just a solution.

Chrome has a button to do this, the "Elements" tab on the right hand side see a dotted box and the cursor together icon, it can switch other states.

Firebug to the right of the HTML tag, click on the style small arrow, you can choose the desired state. Firebug does not provide: visited status option.

Firefox provides a drop-down menu for the DOM element you choose, right click "View element" to see it, and Firefox does not provide: visited status option.

In opera, the "Style" tab has a list icon, Opera offers: Link and:: Selection option. In the new version of Opera, the position is consistent with Chrome.

Right-click an element on the Safari,dom and display a menu with the "Force psuedo-classes" option.

Drag and drop rearrange elements

In Chrome and Safari, under the "Elements" tab, you can drag and drop the rearrangement element order. Simply click the drag element, and a line will appear in the target location.

Using SASS Source Maps

There are many advantages to using CSS preprocessor, but it is difficult to modify in the browser development tool. For example, when you run SASS again, the compiled CSS that is saved in the development tool may be overwritten and less desirable. SASS more than 3.3 (can be installed using ' SASS gem install Sass–pre '), creating mappings for SASS files is easy and you can easily save changes.

First, add the command for SASS watch --sourcemap , like this:

sass --watch scss/devtoolsecrets.scss:css/devtoolsecrets.min.css --style compressed --sourcemap

Then add the name of the mapping file (Sourcemappingurl) at the bottom of the SASS file:

/*@ sourceMappingURL=devtoolsecrets.css.map */

Then, you need to enable the "experiments experiment." Address bar input chrome://flags enable the "Enable Developer Tools Experiment" option, click the "Restart Now" button at the bottom of the page to apply the change. In the lower right corner of the Chrome development tool, click on the Gear button to open the Settings panel.

Click on the "General" tab to activate the Enable source Maps enabled source Maps. Click the "Experiments Experiment" tab and check the "Support for SASS support SASS" option.

Restart the browser and you can view the line number of the SASS file directly.

Debugging

With debugger; Debugging

Add this line of code: debugger; You can create breakpoints automatically, and when the development tool is open, breakpoints are created automatically.

Although it is convenient to add breakpoints quickly, you don't need to look in the development tool line, be careful not to debugger; Submit to the online environment.

Conditional breakpoint

Conditional breakpoints are useful when you do not have to take effect every time. For example, you know that your code has bugs in the last item, and you can use conditions to determine when the last item activates debugger. The condition is satisfied and the breakpoint is triggered.

Create a conditional breakpoint in Chrome, create a normal breakpoint first, and then right-click the breakpoint to select Edit Breakpoint to add the condition.

In Firebug, you create a regular breakpoint, and then right-click the input box to add a condition.

In Firefox, right-click the line where you want to create the breakpoint, and select Add conditional breakpoint.

In IE, first create a regular breakpoint, then right-click the breakpoint, select Condition ....

In Opera, create a regular breakpoint, and then right-click the breakpoint and choose Add Condition.

In Safari, make sure that both the script and the debugger panel are open, create a breakpoint, and then right-click the same breakpoint in the debugger panel and choose Edit Breakpoint.

DOM Breakpoint

If a particular DOM changes, your page is corrupted, or you just want to find out what element attributes or child elements change, which code is in effect, and both Chrome and Firebug can set breakpoints when the DOM is modified, and you can find the source of the code problem. Simply click on the element you want to monitor and right-click to select the Break on option.

XHR Breakpoint

In Chrome, you can set breakpoints for XMLHttpRequest and you can debug AJAX requests. To the "Sources" tab select "XHR Breakpoint" and click on the right plus icon to enter some or all of the URLs you want to add a breakpoint to. Once the request returns, the breakpoint will take effect, you can see the returned data, and you can step through the subsequent operation.

Uncheck to turn off the breakpoint and right-click to remove breakpoint by selecting Delete Breakpoint.

In Firebug, you can also choose to break the condition by selecting the "Break at XHR" button on the Network tab or by right-clicking "interrupt at XHR".

To check the scope of a breakpoint

In Chrome, when Javascript pauses at a breakpoint, you can view all variables and objects in the current scope, either suspended or viewed through the console.

Firebug has the same option, but you need to choose show Closures on the DOM menu. If the breakpoint is set properly, this powerful property makes it easy to see the variables in the closure.

Firebug has additional functionality to access the hidden closure variables without stopping at the breakpoint. Look at this example:

function Person(name) { this.introduce = function() { console.log("Hello, my name is %s", name); } } // create an instance of Person: var someone = new Person("Arthur"); // we call a closure! someone.introduce(); // prints "Hello, my name is Arthur"

The code accesses the following closure variables: closure.%variable The above example, you will use this expression to access name:someone.introduce.%name//==> "Arthur" Note that you can also change the value:

In Firebug, where JavaScript is required, the same syntax takes effect, such as monitoring panels and conditional breakpoints.

Monitoring values

In the upper-right corner of the Script tab, the monitoring variable is fairly easy, and only the input variable name, "Monitor" will keep its value updated.

Debug compressed JavaScript after compression

The next breakpoint makes JavaScript debugging easier, but if the code is already in the build environment, it is likely to be compressed. How do you debug the minimized code? Thankfully, some browsers already support extracting your JavaScript.

In Chrome and Safari, select the "Script" tab, locate the appropriate file, and then click on the "{}" icon (pretty print, at the bottom of the panel).

In IE, click the tool icon to select the Drop-down menu and find the format JavaScript option.

Opera automatically formats compressed JavaScript.

Using JavaScript Source Maps

When we deploy the code to the production environment, it is wiser to compress the code to reduce the load time. The compression goes beyond useless characters (such as annotations), blank lines, and spaces. However, after compression is difficult to debug, can not step debugging, the code is not easy to read. JavaScript source maps is useful for debugging compressed JavaScript files, which provides a mapping associated to uncompressed files.

Create the JavaScript source maps, download Google Closure Compiler, which helps you generate a. map file.

Run the Closure Compiler with the Source Map property:

At the bottom of the compressed JS file plus the name of the mapping file: Sourcemappingurl

In the Chrome developer tool, the Settings Settings menu-> the "General" tab, activating the Enable source Maps enabling source Maps.

Now, when you debug JavaScript, you can use an uncompressed version to find out where the problem is.

Impersonate the user Agent

Sometimes masquerading as a different browser or device for debugging, especially when a Web site is used for device detection.

In Chrome, open the Settings menu (lower right corner gear icon), select the "Overrides" option and find the "User Agent" option. You can choose the built-in options, or you can choose "Other" to add yourself. If you choose to move or tablet, Chrome will resize the browser-uncheck "Device Metrics", and it's easy to turn off this feature.

In Opera, click on the bottom left "Panel" arrow (development tool above), select +, then choose "Custom", to the Button tab select "Preferences", and then stall the "recognized as Opera" drop-down box, drag to the browser toolbar.

Analog Touch control equipment

Chrome can be disguised as a device that supports touch, simulating touches events directly in the browser. In the Setup Panel (Chrome Developer's lower right corner gear icon), select the "Overrides" option and select "Emulate Touch events analog touches event".

In Chrome Canary, a circle replaces the cursor and can be used to differentiate between the modes.

Coverage location

If your application uses geolocation, it can be very useful to simulate different locations. In the Chrome, "Settings" menu, select the "Overrides" tab, where you can simulate different latitude latitudes, or you can simulate a location that is not available.

You can get the latitude and longitude of the location from Google Maps by using the Maps Labs with a coordinate prompt.

Override device Orientation

Device orientation changes can be emulated in Chrome. "Settings"-> "Overrides", select "Override Device orientation" and enter a new value in the input box.

Alpha represents 0-360 degrees along the z axis. Beta stands along the x-axis-180-180 degrees-forward to the back of motion Gamma represents along the y-axis-90-90 degrees-left to right motion

Changing the value triggers the deviceorientation event.

Debugging Canvas Elements

Chrome can use development tools to debug canvas elements and can be used for 2d and WebGL canvas projects.

First enable the "Experiments" tab, the Address bar input chrome://flags, enable the "Enable Developer Tools experiments", press the "relaunch now" button to apply the change. To the Setup Panel, locate the "Experiments" tab and select the "Canvas Inspection" option.

Now visit the "Profile" tab and you can see the "Capture Canvas frame capture Canvas frames" option. You may need to overload the page during use. Press "Start" to capture a single frame of the canvas application. You can also click on the box below to switch to "consecutive Frames continuous frame", and you can capture multiple frames.

Each visit to Canvas Chrome creates a log that provides a list of each access context and a snapshot. You can click on a log entry to replay that frame, see which commands are invoked, and what line they are in.

Running Code Snippets

If you find that the same code needs to run repeatedly, Chrome Canary (which is already available in Chrome 29) provides a handy "Snippets fragment" area where you can save your code.

In the "Source" tab, "Sources" and "Content scripts" after a "Snippets" tag, right click on the empty area, point "new" to create a novel fragment, write some code, whenever you want to run it, right click Select "Run" can be.

Firefox 6 + code Snippet shorthand (development tool Small book icon in the upper right corner) is similar to this.

Performance

Disable browser caching

Each browser can disable caching of Web pages, ensuring that resources are loaded from the server every time.

Chrome, set up small gear to find, "General"-> "Disable cache."

The IE menu bar under Cache.

Opera, click the Network tab to clear the cache, select "Network Options"-> "Disable all Caching"

Firebug, Network tab-> dropdown menu "Disable browser caching"

In any browser exhale clear Cache dialog box, Ctrl + SHIFT + Delete (Windows), SHIFT + CMD + Backspace (MAC).

Sorting network requests Find bottlenecks

In order to display the resources for each request in the Network tab, click the title of each column to reorder.

Most browsers share public fields on the Network tab, and you can sort the fields by file name, domain name, resource type, HTTP status, method, and resource size.

In IE, the filename and domain name fields are merged.

For Chrome Further, click the "Timeline" field to display additional sorting options:

• Start time default option, sorted by start of each request
• Response time to get responses by network request
• End time Sort by request
• Duration time sorted by requested completion
• Latency the total amount of time the browser initially requested to receive the response. Sort by wait time to see which resource is taking up a lot of time waiting for the response. The wait time depends on the distance the user is away from the server, and setting Content Delivery Networks (CDN) can improve this time. Merging CSS and JavaScript files allows image stitching to reduce the number of resource requests and therefore reduce the total latency.

The network timeline is exported as a HAR file

HAR (HTTP archive) files can be used for a variety of profiling techniques and debugging. The HAR file can be attached when testing for bugs-developers can run HAR data lookup problems locally.

We can use the Chrome development tool to export the Network tab timeline, right click on the network input, select "Save as HAR with Content".

Firebug needs to install another plug-in net-export, which is developed by the Firebug development manager and the HAR format creator.

Chromehar is an online tool that provides the same timeline interface as Chrome, with similar features.

Check domcontentload and Load events

The Web timeline for Chrome and Safari (and the Firebug network panel) shows how fast a Web page loads, with a line marking the timing of the domcontentloaded and load events triggering.

• When the browser resolves the document (but other resources such as the image, the stylesheet may not have been downloaded) domcontentloaded triggered, it is identified with a blue line.
• When all initial resources (images, stylesheets, JavaScript) are loaded, the Load event is triggered once and it is identified with a red line.
• When two events are triggered at the same time, the line of identification is purple.

In Safari, the logo line is dashed.

Resend XHR Request

If you want to resend the XHR request but do not want to refresh the page or trigger the event, right-click on the resource and select "Replay XHR" (Firebug is called "Resend").

Measuring rendering performance and FPS

Chrome provides a frame rate timeline that you can debug on a per-frame basis.

To create a frame timeline, first open the Chrome development tool, select the "Timeline" tab, and the black circle at the bottom represents "record records," Press the start timeline record, and then stop the recording for the second time. At the same time, you can interact with the Web page normally, and the frame mode will record the behavior of all frames.

Timeline chart Each represents the Single-frame animation, and different colors are represented as follows: Blue indicates load task, yellow for Script task, purple for rendering task, green for drawing task, white area for idle time.

The timeline chart below is a waterfall diagram of the performance of the Web page, with the frame displayed in the title column, and the number of milliseconds that the frame is spent on, and the corresponding action recorded on the left.

You can drag two gray mouse sliders to change the number of frames you want to check.

Hover over the header row of the timeline to display the duration of the frame, the FPS value, the CPU time, and the total time that is interacting with the frame.

Hover over the record on the left to see the duration of each task, as well as other useful information. If there are pages related to the section, it will be highlighted, some tasks are grouped, click on the waterfall Chart arrows to view.

Moving End

Development tools to debug IOS

Connect iOS devices to available Macs, and turn on the Mac and iOS device Safari.

Find Safari's Develop development menu, and the first menu divider should be followed by the name of the IOS device you want to connect to. Select the page you want to debug in the submenu.

Safari's development tool will appear as a pop-up window, and you can debug your mobile device's site.

Development tools to debug Android

You can use the Chrome Canary development tool on your Mac to debug the public and local Web sites on Android devices, and you can access a wide range of feature sets for chrome development tools on your phone.

First, you need to install Chrome BETA on Android devices.

Then, you need to download the ADB plug-in extension and install it on the Chrome Canary. Never downloaded in Google Play store, you need to drag the file to the extension page (chrome://extensions/).

Make sure that the Enable Developer tools experiments enabled development tool experiment is already open in chrome://flags.

Mobile phone with a USB cable plugged into the computer, found in the phone "settings", select "Developer Options" to ensure "USB debugging" selected. If it's already selected, and you've never used USB debugging before, deselect it, re-select it, and make sure it has the MAC address of the computer.

Now go to Android's Chrome BETA and click on the menu icon and "Settings" to make sure the Enable USB Web debugging enable USB Web debugging enabled. Opens a new label.

In the Chrome Canary, click on the ADB plugin icon and click "Start adb" to restart the browser.

Access the Check page (chrome://inspect), locate the device (requires Chrome Canary 28 +), and locate the label you want to debug. Click on the "Inspect check" link on the right side of the page URL.

Pop-up "Settings" window, click on the "Experiments Experiment" tab, enable "Reverse Port forwarding", you need to close the window to restart the development tool, "Port forwarding" label before the appearance, and then point "Inspect View the link.

On the Port Forwarding tab, enter the ports you want to forward (for example, 9000), and the address should be mapped to a local computer. Now, in the mobile device input localhost: port number (such as localhost:9000), the local site should be loaded on the mobile device, and can be debugged.

Extended

Coverage location

In Firefox, the location API can be covered like Chrome, requiring geolocater extensions.

After installation to the Tools tool menu, "Geolocater", "Manage management", you can add a "forged" location directly by browsing the map or search location. You can override the previously preset geographic location. You can try it on the Html5demos for geolocation page.