Chrome控制台 ： Explore and Master Chrome DevTools

Chrome控制台 ： Explore and Master Chrome DevTools

前言

此篇是 codeschool Discover DevTools 视频的笔记总结

虽然视频比较早，大部分技巧依旧实用

详细资料建议参考 Chrome Dev 开发文档

原视频无字幕，需要的话，可以从网上找到

Element

动态改变（增删改查）
- 右击审查元素或者在工具中去审查元素

HTML（左面板）

双击及时改变内容

更改 attribute

以HTML形式更改

拖动DOM（更改DOM位置），删除等

CSS（右面板）

displacys CSS rules for active element

enable/disable properties

edit rules for pseudo-classes

link directly to CSS source

手动选择 active, hover, focus, visited

会自动跳出对应的CSS，更改增加有效

Sources

modify appliaction source files

export changes

track file versions

save: in browser’s storage

load Modifications: 更改记录（包含 apply revision content，revert）

save as: 保存到本地

Console

记录错误信息

使用

$

方便存取DOM元素

配合

inspect()

使用

$0

-

$4

直接获取最近存取元素

Debugger

更改javascript source，保存执行

pretty code

set a debugger break point by clicking on the left margin

执行控制按钮

从左到右

pause / resume: 运行到下一个断点

step over: 执行下一行

step into next function call

step out of current function

deactivate breakpoints

Pause on exceptions

可选： Pause on Caught Exceptions

Async

选择 Application 面板

可以更改 Local Storage, cookies 等

Network

Resource info -> size, type, ect.

Server response details

Timeline of network requests

shift 键 + 刷新： 重新下载所有资源

disable the cache

隐身模式

设置中开启此选项

Timeline

不同颜色含义不同

Timeline 图中的 红线与蓝线（底部有 response 综合信息）

Initiator： 请求资源位置

PageSpeed（Chrome extension） : analyze and optimize your site following web best practices

minify, combine javascript file -> Google Closure Compiler

avoid bad requests

optimize style sheet order (add async)

png instead of jpeg, appropriate picture scale

Frame View and CPU Profiler

Frames

HTML loading

Javascript execution

Styling

Painting to screen

注： 此处现浏览器与视频差距较大，可参考 How to Use the Timeline Tool

CPU Profiler

track down where your slow Javascript code is happening

Memory leak

Take Heap Snapshot

多次提取 snapshot

切换到比较视图

Console 补充

参考 Using the Console

$_

: returns the value of the most recently evaluated expression.

$(selector) === document.querySelector()

$$(selector) === document.querySelectorAll()

console.log()

The first parameter passed to any of the logging methods may contain one or more format specifiers.

A format specifier consists of a % symbol followed by a letter that indicates the formatting that applies to the value.

The parameters following the string apply to the placeholders in order.

Ex:

console.log("%s has %d points", "Sam", 100);

Styling console output with CSS

Ex:

console.log("%cThis will be formatted with large, blue text", "color: blue; font-size: x-large");

console. -> info, error, warn

console.assert(expression, object)

console. -> group(label), groupEnd()

table(), console.table()

clear(), console.clear()

copy(object)

copies a string representation of the specified object to the clipboard

dir(object), console.dir(object)

displays an object-style listing of all the specified object’s properties.

console.time(label), console.timeEnd(label)

track time elapsed between code execution points

console.count(label)

keys(object), values(object)

profile([label]), profileEnd()

profile() starts a JavaScript CPU profiling session with an optional name. profileEnd() completes the profile and displays the results in the Profile panel

monitor(function), unmonitor(function)

When the function specified is called, a message is logged to the console that indicates the function name along with the arguments that are passed to the function when it was called.

debug(function), undebug(function)

When the specified function is called, the debugger is invoked and breaks inside the function on the Sources panel allowing to step through the code and debug it.