forked from CN-Chrome-DevTools/CN-Chrome-DevTools
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request CN-Chrome-DevTools#37 from ChangMM/cmm-branch
Create overview.md
- Loading branch information
Showing
2 changed files
with
312 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,197 @@ | ||
| #Tips and Tricks(小技巧) | ||
|
|
||
| ##console(控制台) | ||
| ###运行多行的命令 | ||
| `Shift` + `Enter` 允许您在控制台输入多行。 | ||
|  | ||
|  | ||
|
|
||
| > [Snippets](https://developer.chrome.com/devtools/docs/authoring-development-workflow.html#snippets)了解更多关于多行代码持久使用的方法。这个功能可以执行自定义的javascript片段，并将其存储在DevTools中。 | ||
| ###启动元素审查的快捷方式 | ||
|
|
||
| `Ctrl` + `Shift` + `C` 或 `Cmd` + `Shift` + `C` 将快速启动 `DevTools` 检查元素的模式。 | ||
|
|
||
|  | ||
|
|
||
| [更多关于Console|Devtools Doc](https://developer.chrome.com/devtools/docs/console.md) | ||
|
|
||
| ###支持 console.table 命令 | ||
| 使用如下： | ||
| ``` javascript | ||
| console.table([{a:1, b:2, c:3}, {a:"foo", b:false, c:undefined}]); | ||
| console.table([[1,2,3], [2,3,4]]); | ||
| ``` | ||
|  | ||
|
|
||
| 还有一个可选的 `columns` 参数来选择需要输出的列。 | ||
| 如下： | ||
| ``` javascript | ||
| function Person(firstName, lastName, age) { | ||
| this.firstName = firstName; | ||
| this.lastName = lastName; | ||
| this.age = age; | ||
| } | ||
|
|
||
| var family = {}; | ||
| family.mother = new Person("Susan", "Doyle", 32); | ||
| family.father = new Person("John", "Doyle", 33); | ||
| family.daughter = new Person("Lily", "Doyle", 5); | ||
| family.son = new Person("Mike", "Doyle", 8); | ||
|
|
||
| console.table(family, ["firstName", "lastName", "age"]); | ||
| ``` | ||
|  | ||
| 如果只想输出出前两列，可以： | ||
| ``` javascript | ||
| console.table(family, ["firstName", "lastName"]); | ||
| ``` | ||
| ###预览在控制台打印出的对象 | ||
| 可以直接使用console.log()预览打印出的对象，不需要做额外的工作。 | ||
|
|
||
|  | ||
|
|
||
| ###传递多个参数控制打印日志的样式 | ||
| 你可以通过 `%c` 将样式添加到您的控制台日志,就像你可以在Firebug中做的一样。如： | ||
|
|
||
| ``` javascript | ||
| console.log('%cBlue! %cRed!', 'color: blue;', 'color: red;'); | ||
| ``` | ||
|  | ||
|
|
||
| [More: Styled Console Logging In The DevTools | G+](https://plus.google.com/115133653231679625609/posts/TanDFKEN9Kn) | ||
|
|
||
| ###清空控制台历史的快捷键 | ||
| `Ctrl` + `L` and `Cmd` + `L` [快捷键](https://developer.chrome.com/devtools/docs/shortcuts.html). 在 **shell** 中 `clear()` 命令也可以。 javascript中的[console.clear()](https://developer.chrome.com/devtools/docs/console.md#clearing-the-console-history)也是可以的。 | ||
|
|
||
| ###做一个键盘侠 | ||
|
|
||
| `Devtools` 打开并获得焦点时时，`Shift` + `?` 命令打开一个设置面板，选择 `shortcuts` 可以看到所有可用的[快捷键](https://developer.chrome.com/devtools/docs/shortcuts.html) | ||
|
|
||
|  | ||
|
|
||
| ###从控制台快速的选择元素 | ||
|
|
||
| Select an element and type $0 in the console, it will be used by the script. If you have jQuery on the page, you can then use $($0) to reselect the element in the page. | ||
|
|
||
|  | ||
|
|
||
| You can also right click on any element output to the console and click 'Reveal in Elements Panel' to find it in the DOM. | ||
|
|
||
|  | ||
|
|
||
| ###用XPath表达式选择DOM | ||
| XPath is a query language for selecting nodes from documents and generally returns a node-set, string, boolean or number. You can use XPath expressions to query the DOM from the DevTools JavaScript console. | ||
|
|
||
| The $x(xpath) command will allow you to execute a query - see below for an example of how to search for the images in a page using $x('//img'): | ||
|
|
||
|  | ||
|
|
||
| However, the function also accepts an optional second argument for the path context - i.e $x(xpath, context). This lets us select a specific context (e.g an iframe) and run an XPath query against it. | ||
|
|
||
| ```javascript | ||
| var frame = document.getElementsByTagName('iframe')[0].contentWindow.document.body; | ||
| $x('//'img, frame); | ||
| ``` | ||
| which queries the images within the specified iframe. | ||
|
|
||
| ###得到控制台最后一个输出的结果 | ||
| 使用 `$_` 得到控制台最后一个输出的结果. | ||
|
|
||
|  | ||
|
|
||
| ###console.dir() | ||
| [console.dir(object)](https://developer.chrome.com/devtools/docs/console-api.md#consoledirobject) 提供的命令可以列出一个JavaScript对象所有属性。 | ||
|
|
||
|  | ||
|
|
||
| ###在指定的 iframe 中运行控制台中命令 | ||
| Along the bottom bar of the DevTools are drop-down options that change depending on the context of your current tab. When you’re in the Console panel, there’s a drop-down that allows you to select the frame context that the console will operate in. Select your frame in the drop-down and you’ll find yourself in the right context in no time. | ||
|
|
||
|  | ||
|
|
||
| ###当浏览器切换到另一个页面时保存控制台中历史 | ||
| 在控制台版面右键，选择 `save` 即可 | ||
|
|
||
|  | ||
|
|
||
| ### console.time() 和 console.timeEnd() | ||
| 可以 `console.time()` 和 `console.timeEnd()` 计算程序运行的时间.如下： | ||
|  | ||
|
|
||
| ### console.profile() 和 console.profileEnd() | ||
| DevTools打开时,调用 `console.profile()` JavaScript CPU的分析。`console.profileEnd()` 结束此次分析。如下： | ||
|
|
||
|  | ||
|
|
||
| 每次分析都被加到 `Profiles`面板和 `console.profilses'中: | ||
|
|
||
|  | ||
|
|
||
|  | ||
|
|
||
| ** 更多使用控制台的技巧见[using the console](https://developer.chrome.com/devtools/docs/console.md)**: | ||
| * [Console Api](https://developer.chrome.com/devtools/docs/console-api.md) | ||
| * [Command Line Api](https://developer.chrome.com/devtools/docs/commandline-api.md) | ||
|
|
||
|  | ||
|
|
||
| ##Elements | ||
| ###打开尺标线 | ||
| 打开 **Devtools** `Settings` > `General` > `Show rulers`即可 | ||
|
|
||
|  | ||
|
|
||
| ###css 属性的自动补全 | ||
|
|
||
|  | ||
|
|
||
|  | ||
|
|
||
|  | ||
|
|
||
| ###颜色选择器 | ||
| 在Devtools中点击颜色时可以调出一个颜色选择器。用 `shift` + 'click' 可以改变颜色的样式。 | ||
|
|
||
|  | ||
|
|
||
| ###新增CSS 样式 | ||
|
|
||
|
|
||
| ###在Elements面板中拖曳元素 | ||
| 在Elements中拖曳元素可以改变该元素在文档流中的未知和显示的样式。 | ||
|
|
||
|  | ||
|
|
||
| ###改变元素的状态 | ||
| * Right click on a child element and select 'Inspect Element' | ||
| * In the Elements panel right-click the parent element and choose "Force Element State" | ||
| * You can now choose one of :active, :hover, :focus or :visited to force the element into one of these states. | ||
|
|
||
|  | ||
|
|
||
| ###调试 less 或者 sass 代码 | ||
|
|
||
| `Settings` > `General` > `Sources` > `Enable CSS source maps` | ||
|
|
||
|  | ||
|
|
||
| ** 更多关于样式和DOM操作的技巧[Editing Styles And The DOM](https://developer.chrome.com/devtools/docs/dom-and-styles.html)** | ||
|
|
||
|  | ||
|
|
||
| ##Timeline | ||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,115 @@ | ||
| Chrome开发工具(又称DevTools),是一套内嵌在chrome浏览器内部的web编写和调试工具。DevTools提供给web开发人员深入地访问浏览器内部和web应用的机会。DevTools可以有效地 **跟踪布局问题** , **设置JavaScript断点** ,以及 **进行javascript代码的优化** 。 | ||
|
|
||
| > 注意:如果你是一个web开发人员,想要最新版本的DevTools,移应该使用[Google Chrome Canary](https://www.google.com/intl/en/chrome/browser/canary.html)。 | ||
| ## 打开DevTools | ||
| 要在一个网页或者web application中打开DevTools，可以用下面两种方法： | ||
|
|
||
| 1. 选择Chrome浏览器窗口右上角的 ,然后选择 **工具** > **开发工具**。 | ||
|
|
||
| 2. 右键单击任何页面元素>选择 **审查元素**。 | ||
|
|
||
| DevTools工具将会在你的浏览器的地步打开。还有几种打开Devtools的快捷方式： | ||
|
|
||
| 1. 使用 `Ctrl` + `Shift` + `I` (`Cmd` + `Opt` + `I` on Mac)打开DevTools。 | ||
|
|
||
| 2. 使用 `Ctrl` + `Shift` + `J` (`Cmd` + `Opt` + `J` on Mac)打开DevTools并将焦点移到控制台。 | ||
|
|
||
| 3. 使用 `Ctrl` + `Shift` + `C` (`Cmd` + `Shift` + `C` on Mac)打开DevTools并将焦点移到检查元素移模式,或者控制检查元素模式开关如果DevTools已经打开了。 | ||
|
|
||
| [更多快捷方式](https://developer.chrome.com/devtools/docs/shortcuts) | ||
|
|
||
| ## DevTools窗口 | ||
| DevTools以任务的种类被组织到窗口顶部的工具栏里。每个工具栏项和相应的面板都有一个特定类型的页面或应用程序信息,包括 `Elements` , `Source` 和 `Resources` 等。 | ||
|
|
||
|  | ||
| > Devtools 中的颜色选择器 | ||
| 总的来说,在Devtools中有8种工具面板: | ||
|
|
||
| * [Elements](https://developer.chrome.com/devtools/docs/dom-and-styles) | ||
| * [Resources](https://developer.chrome.com/devtools/docs/resource-panel) | ||
| * [Network](https://developer.chrome.com/devtools/docs/network) | ||
| * Sources | ||
| * [Timeline](https://developer.chrome.com/devtools/docs/timeline) | ||
| * [Profiles](https://developer.chrome.com/devtools/docs/profiles) | ||
| * Audits | ||
| * [Console](https://developer.chrome.com/devtools/docs/console) | ||
|
|
||
| 你可以用快捷方式 `Ctrl` +` [` 和 `Ctrl` + `]`进行切换. | ||
|
|
||
| ## 查看DOM结构和样式 | ||
|
|
||
| `Elements` 面板让你看到一棵 `DOM` 树,并允许你进行 `DOM` 元素检验和动态编辑。如果需要确认一些页面的 `HTML`片段，你会经常访问 `Elements` 面板。 | ||
|
|
||
|  | ||
| > 查看一个h标签 | ||
| [更多关于查看`DOM`结构和样式](https://developer.chrome.com/devtools/docs/dom-and-styles) | ||
|
|
||
| ## 用控制台工作 | ||
| JavaScript控制台提供了两种主要功能为开发人员测试web页面和应用程序。在这个地方你可以: | ||
|
|
||
| * 在开发过程中打印诊断信息。 | ||
| * 利用`shell`工具进行`Documents`和`Devtools`的交互。 | ||
|
|
||
| 你可以使用 [Console API](https://developer.chrome.com/devtools/docs/console-api) 提供的控制台日志诊断信息的API。如 [console.log()](https://developer.chrome.com/devtools/docs/console-api#consolelogobject-object) 或 [console.profile()](https://developer.chrome.com/devtools/docs/console-api#consoleprofilelabel) 。 | ||
|
|
||
| 你可以使用 [Command Line Api](https://developer.chrome.com/devtools/docs/commandline-api) 提供的方法直接在控制台中运行表达式。包括 [$()](https://developer.chrome.com/devtools/docs/commandline-api#selector) 命令选择元素或者 [profile()](https://developer.chrome.com/devtools/docs/commandline-api#profilename) 进行CPU分析。 | ||
|
|
||
|  | ||
|
|
||
| [更多关于控制台](https://developer.chrome.com/devtools/docs/console) | ||
|
|
||
|
|
||
| ## 调试javascript | ||
|
|
||
| 随着JavaScript应用程序的复杂性增加,开发人员需要强大的调试工具来帮助快速发现问题的原因并有效地修复它。Chrome DevTools中有一些有用的工具来帮助我们不那么痛苦地调试JavaScript。 | ||
|
|
||
|  | ||
|
|
||
| [更多关于调试javascript](https://developer.chrome.com/devtools/docs/javascript-debugging) | ||
|
|
||
| ## 进行网络加载的优化 | ||
|
|
||
| `Network` 面板提供了实时的资源请求和网络下载。识别和解决这些超过预期的请求时间是页面优化的重要一步。 | ||
|
|
||
|  | ||
|
|
||
| [更多关于`Network`](https://developer.chrome.com/devtools/docs/network) | ||
|
|
||
| ## Audits | ||
| `Audits` 面板可以从一个页面加载的时候开始分析一个页面。然后提供降低页面加载时间、增加页面响应的优化建议。 | ||
| [更多见PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/)。 | ||
|
|
||
| ## 优化页面渲染 | ||
| `Timeline` 面板给你一个完整的关于加载和使用web应用程序或页面的时间花费的信息。所有事件,从解析JavaScript加载资、,计算样式、重新渲染都将绘制于`Timeline`面板上。 | ||
|
|
||
|  | ||
|
|
||
| [更多关于优化渲染](https://developer.chrome.com/devtools/docs/timeline) | ||
|
|
||
| ## javascript && CSS 优化 | ||
| `Profiles` 面板可以查看web应用或页面的执行时间和内存使用。这些有助于理解,资源被使用在哪里,帮助优化代码。提供的分析器有: | ||
| * **CPU profiler** 显示页面的 `JavaScript` 函数的执行时间. | ||
| * **Heap profiler** 显示页面的 `JavaScript` 对象和 `DOM` 节点内存分配。 | ||
| * **JavaScript profiler** 显示页面脚本的执行时间。 | ||
|
|
||
|  | ||
|
|
||
| [更多关于如何优化javascript && css 表现](https://developer.chrome.com/devtools/docs/profiles) | ||
|
|
||
| ## 查看存储 | ||
| `Resources` 面板可以查看页面上加载的资源. 也可以和 `HTML5 Database`、 `Local Storage` 、 `Cookies` 、 `AppCache` 等进行交互. | ||
|
|
||
|  | ||
|
|
||
| [更多关于Resouces](https://developer.chrome.com/devtools/docs/resource-panel) | ||
|
|
||
| ## Further Reading | ||
|
|
||
| * [Heap Profiling](https://developer.chrome.com/devtools/docs/heap-profiling) | ||
| * [CPU Profiling](https://developer.chrome.com/devtools/docs/cpu-profiling) | ||
| * [Device Mode & Mobile Emulation](https://developer.chrome.com/devtools/docs/device-mode) | ||
| * [Remote Debugging](https://developer.chrome.com/devtools/docs/remote-debugging) | ||
| * [DevTools Videos](https://developer.chrome.com/devtools/docs/videos) |