FE 101: DevTools – Chrome Developer Tools – Other Browser's Tools
FE 101: DevTools – Chrome Developer Tools – Other Browser's Tools
0 0
fe101-devtools
slides from fe101-devtoolsOn Github gaohailang / fe101-devtools
FE 101: DevTools
Chrome Developer Tools
by @siva海浪高
「工欲善其事，必先利其器」
Video
Other Browser's Tools
Before digging into Chrome's developer tools,
just a brief look at the development tools
provided by the major browsers.
Firefox
Firebug
IE
Opera Dragonfly
Course Summary
Overview
let's take some time to understand the little controls near the top and bottom.
Elements Panel
List the page's markup as it is rendered in the browser.
Updating Styles
Extra Info
- What: The Elements panel allows for viewing and editing elements and style information.
- Where: It's the first panel. You can also access it by right-clicking an element on the page and selecting Inspect element.
- Why: There are a number of use cases. You may wish to modify the DOM by deleting a node or adding a new one. Markup aside, the elements panel is a great place to see the applied styles of a specific node. You can also add and remove styles, as well as create new rules to possibly add to your stylesheets.
Feature: DOM Modification
Feature: Locating Elements
Feature: Locating Elements
Feature: Locating Elements
Feature: Viewing Style Information
Feature: Viewing Style Information
Feature: Setting Style Information
Feature: Setting Style Information
Resource Panel
Show what resources a page uses.
What: The resources panel shows resources associated with the page
Why: Viewing the page's resources is essential for debugging. You might also be curious as to what information other websites store in localStorage, cookies, or any other data storage mechanism. Additionally, certain resources, such as localStorage can be modified via the developer tools.
The button to active the Resources panel. The category pane shows the various types of resources we can inspect. A resource header (such as "Frames" or "Session Storage") may have an error next to it. This indicates there is more information, and clicking on the header reveals that information. This pane is resizable; so make it as large or small as you like. Page resources including fonts, images, JavaScript, CSS and the page itself can be found here. If the page uses multiple frames (for example using a frameset), then each frame appears as a separate folder within the parent "Frames" folder. This is useful for understanding the relationship between a frame and its resources. If Web SQL databases are used in the page, this shows their contents. Similar to Web SQL, IndexedDB displays the contents of the IndexedDB database. Displays the key/value pairs stored in localStorage. Displays the key/value pairs stored in sessionStorage. Lists the cookies created by the domain. Displays the assets cached according to the cache manifest. This section contains a lot of useful information. For example, a resource such as a JavaScript library will show the resource path, file size, and file type. Displays the details regarding the selected resource in the left-hand pane.Feature: Viewing frame contents
Each frame is placed inside its own folder
Feature: Viewing Fonts
System fonts, such as Arial or Helvetica, are not listed
Feature: Viewing Images
Info like dimensions, file size, and MIME type are displayed
Feature: Viewing Scrips & Styles
Content Panel just displays its content, but not much else
More support and capabilities will be added in another panel(Source Panel which we will show right away)Feature: Resources that failed to load
When the browser will be unable to load a resource, a red notification appears to the right of the asset
Feature: More Actions with Resources
Each resource has a context menu, right-clicking on it
shows a menu similar to this:You can save a resource to your computer, open a resource in a new tab, and perform many other tasks. Double-clicking the resource opens the asset in a new tab.Feature: Viewing Cookies
Misc: LocalStorage SessionStorage ApplicationCache Etc
Sources Panel
the go-to place for javascript debugging!
The Sources Panel. If you do not see as many scripts as you expect, refresh the page with the Sources panel open. This pane can be either hidden, auto-hidden or fixed. Click on the small icon to the right of 'Content scripts' to toggle between these states. This pane can be resized. The Sources tab within the left-hand side pane; you'll likely have this tab open most of the time. The resources it lists are separated by sub-domain, and you can expect to see CSS, JavaScript and HTML within the tab. The Content Scripts tab (not active in the screenshot) may at first display many oddly named scripts. These are in fact Chrome extensions that loaded on the page. This is useful for debugging actual extensions. Otherwise, you can avoid seeing them by opening your page in an incognito window; most extensions are disabled by default in incognito mode. The main content pane displays the contents of the selected script. Selecting multiple scripts creates a tabbed interface similar to an IDE. This pane contains sub-panels that provide useful JavaScript debugging utilities. At the top of the pane are the icons to step through your code. Watch Expressions does exactly that, it 'watches' expressions you have typed in. If you find yourself wanting to know the value of the this keyword at the various stages of a JavaScript program, you can watch the this keyword to see its different values over time. Click the add button to add an expression, and if an expression doesn't update, hit the small refresh button next to the add button. XHR Breakpoints enables us to halt JavaScript code execution when making an Ajax request. We get even more control over this behavior by supplying a value in the 'Break when URL contains' field, which pops up when you hit the add button. Providing no value causes the debugger to break upon any XHR request. Event Listener breakpoints allow you to set break points for specific events. The screenshot only lists the top level categories. For example, 'Timer' has the following individual event listener breakpoints: 'Set Timer', 'Clear Timer' and 'Timer Fired'. If you encounter minified code, selecting 'Pretty Print' acts as a JavaScript beautifier.Start JavaScript debug
Feature: Sources Tab
- Resources grouped by the sub-domain
- Enable pretty print mode for minified resources
- Use source maps for minified if possible
Feature: Revisions
You can edit most files in the main content pane, and those changes are immediately reflected in the browser.After you've made a few changes, you can right-click on the resource and select Local Modifications. This opens a new Local Modifications pane which contains a diff of the original and edited files.
Feature: Breakpoints
Breakpoints lets us halt JavaScript code execution and inspect the current environment. To add a breakpoint, click on the line number; you can also right-click on the line number and choose the "Add Breakpoint" option. breakpoints persist between page loads. refresh, if code is evaluated before.
Feature: Event Listener Breakpoints
Note that breaking on a particular event only works when the page in question is listening for that event.useful breakpoint options include: form submission, copying data, DOM mutation events, device orientation, key presses, Ajax requests, mouse events (hovering, moving, clicking etc), setInterval, touchstarts and more.
Feature: DOM Breakpoints
- Subtree modifications occurr when any node in the tree is inserted or removed.
- Attributes Modifications occurr when changing an element's attribute.
- Node Removal fires when removing an element; for example: element.remove().
Console Panel
console.log writes the provided values to the console. There's no need to concatenate values together; console.log supports multiple arguments of different types and writes each of them to the console. When you execute a command, you see the output in the immediately following line. You may occasionally see "[native code]" when attempting to view a native function's definition. You can write functions and execute them. Be aware that pressing the enter key executes the code you typed into the console instead of inserting a new line. Hold shift+enter to insert a new line. An example of an array. Notice the colors are different for different types of values. An example of a large array with 303 elements. Notice how the elements are grouped together; this prevents the console from being flooded with large amounts of data. $0 is a shortcut to return the currently selected element in the Elements panel. Right-clicking on an element in the console gives you an option to view that element in the Elements panel. Errors stand out from other console entries thanks to their red color and icon. We can access anything in the page's scope, including the window object. In the screenshot, I created a new WebKitCSSMatrix object. You can also style console entries using CSS. The console provides code completion. Try typing in "window." and see the vast amount of properties you can choose from!Feature: Inspecting
When inspect large object, you can inspect them by clicking on the drop down arrow immediately to the left of the object.
Misc
Console API && Command Shortcuts
console object API:
assert, clear, count, debug dir, dirxml,
error, group, groupEnd, groupCollapsed,
info, log, profile, fileEnd, time, timeEnd, timeStamp, trace, warn;
debugger statement
$_, $0, $1, $2, $3, $4
$(selector), $$(selector), $x(path)， clear(), copy(object),
dir(object), keys(object), values(object), dirxml(),
inspect(), getEventListeners(object), monitorEvents(), unmonitorEvents,
getEventListeners(object), profile(), profileEnd()
Network Panel
This button opens the Network panel. Be sure to open the tab before loading a page so that it captures the network requests (e.g. open a new browser tab, open up developer tools, open up the network tab and then finally load the URL to monitor) This row contains one resource with interesting information that I cover in the following points. The first column is the name and path of the resource. The resource name will show on the first line while the path to the resource shows on the second. The HTTP method used for the request. The HTTP status code returned by the server. 200 is a common response for a successful response; although anything within the range of 200-299 is considered OK. Notice how one of the above requests is in red. This is related to the HTTP response code, a 401 Unauthorized response, because I'm not logged in to the LinkedIn mobile site. The content-type of a request. For example, in an HTTP POST (using the metrics resource as an example), the content-type in the request and response headers is: application/json; whereas, the main HTML page's response headers contain a content-type of text/html. A small note on the application cache: when serving a manifest file, be sure to serve it with a content type of text/cache-manifest. When debugging, the "Type" column in the Network panel is the place to ensure it's being served correctly! The initiator is an interesting column; it allows us to see why a resource is downloaded. For example, you may see the __utm.gif file often in your debugging sessions; it is used by Google Analytics. The initiator shows as ga.js:52, a value in file_name:line_number format. With this column, you can discover why, when, and how resources are downloaded. If Parser is shown for the initiator, chances are good that the browser initiated the request upon seeing something like a <link /> or <script /> element in the document. This displays the size of the resource, an invaluable piece of information. When building a site, be sure to regularly "sort by size" in the Network panel and ensure that your resource sizes are correct. It is sometimes considered a good practice to base 64 encode images and embed them in CSS files. This can reduce the number of HTTP requests, but it also increases your CSS file's size. Large resources should be delayed as much as possible to provide a snappy experience for the user. This displays the amount of time it took to retrieve the resource. Resources served from a different domain may take longer to download than other resources served from another origin. DOMContentLoaded (an event we can listen for using JavaScript) fires once the DOM is ready. The Load event which fires when the DOM is ready and resources have finished loading. Timeline view of network requests. You can hover over them for more information. Total size transferred, number of requests, and time taken. Icons to interact with the Network panel, such as clearing the panel of all requests and changing icon size. Useful network requests filters, e.g. you can control + click XHR and Images to only show network requests for an image resource or a request made with an XHR object. Headings for the network requests; you can click a heading to sort the requests by the data in the column.
结业证书
发送请求
Badges you can earn:
Feature: Detail for Resource
- Headers contains the request and response headers.
- Preview contains a preview of the resource, for example a rendered image or some source code.
- Response is similar to Preview and shows what was received from the server.
- Cookies (if any) shows cookies sent with the request.
- Timing contains information on how long a request actually took to download.
Timeline Panel
Make the web jank-free
Investigate your web app's performance issues