Chrome开发工具 开发工作流程

由 珍珍阿姨 创建，Loen 最后一次修改 2016-08-12 开发工作流程开发者工作流程一般来说就是需要通过一些步骤来达到一个目标。当作者拥有了开发者工具，这就可以优化工作流程以较少的时间来完成常规任务，比如锁定文件或者函数，持续编写脚本或者样式表，保存经常使用的片段或者仅仅是重新布置一下布局，让其更贴合你得需求。在这一节中，我们将讲解一些小技巧，让你在使用 DevTools 时的工作流程变得更加高效。Dock-To-Right 提供了垂直编辑你可能发现开发者工具在底部时，提供了一些水平空间，可是垂直方向上留下的空间很少。右边的锚点允许你将开发者工具放到窗口右边。这样你就可以在左边窗口可以查看当前的页面，而将测试的东西放在了屏幕的右侧。这样的好处在于：你可能在一个宽屏的显示器上工作，而且你希望可以最大化空间去检查和测试你的代码你可以改变并分开你的布局，使其小于 400 px（当前 Chrom 的最小尺寸）并测试调整后的布局。比较长脚本使用垂直空间更方便调试导航到一个你想要排错的 URL 然后按住位于开发者工具左手边底部布局的按钮。在 dock-to-right 和 dock-to-window 之间切换，注意：开发者工具将会记住你最后一次的选项，所以你可以自己在两种方式间切换。这将调整屏幕以显示可用的布局选项。一旦你已经选中了一个偏好，布局将会立刻改变来响应这个更改。注意：每一个选项卡都有它自己相应的布局形式。这就意味着可能某个选项卡工具是在屏幕右侧而另外一个选项卡则在窗口底部。搜索，导航和过滤过滤一个脚本，样式表或者根据文件名过滤一个片段对于一个开发者的工作流程来说，能够快速定位一个特殊的文件是非常有必要的。通过使用下面的快捷键，开发者工具可以使你搜索全部的脚本，样式表和文件片段：Ctrl + o (windows,Linux)Cmd + o (Mac OS X)这个工具与当前正在使用的控制台无关。对于Todo app，使用下面这些快捷键中的某一个将会带我们进入 Sources 面板并且提供一个列出所有可检查文件的搜索框。在这里，我们可以过滤出特定的文件（例：文件命中包含script）或者选中一个文件，预览或者编辑。注意:在所有的对话中，我们均提供驼峰匹配。比如：打开FooBarScript.js，你可以只写 FBaSc，这样可以节省时间。当前文件中的文本搜索在当前的文件中搜索一个特殊的字符串可以使用以下的快捷键：Ctrl + F (Windows,Linux)Cmd + F (Mac OS X)一旦已经输入了一个关键字到搜索框中，点击回车会调转到第一个匹配的结果。继续点击回车将会在结果中进行跳转，或者你也可以点击搜索框旁边的 up 和 down 箭头按钮来进行跳转。在当前的文件中进行文字替换开发者工具支持当前文件中定位文字，此外也同样支持用新的值来替换替换单个或者所有文字。选中 “Relpace” 将会出现第二个输入区域来填写用于替换的文本。在所有文件中搜索文字如果你希望在所有加载的文件中搜索特定的文字，你可以用下面的快捷键来加载搜索框界面：Ctrl + Shift + F (Windows,Linux)Cmd + Opt + F (Mac OS X)这里同时提供了正则表达式和敏感大小写的搜索方式。使用正则表达式搜索使用正则表达式进行搜索，就是在搜索处填入表达式，然后选中 Regular Expression 最后点击回车。在上面的图中我们可以看见如何搜索所有匹配 中内容的例子。在文件中过滤一个函数或者是一个选择器你应该还想要更多功能，这样就可以在一个文件中导航到（或者搜索到）特殊的 JavaScript 函数或者是 CSS 规则文件。要导航到你选中的文件，进入源面板。然后你就可以使用下面的快捷键来打开一个对应函数/特定选择器的一个选择框：Ctrl + Shitf + O (Windows,Linux)Cmd + Shitf + O (Mac OS X)基于选中文件的类型，你将会看见所有的 JavaScript 或者是 CSS 样式定义。开始输入你要搜索的函数名称或者是 CSS 定义时就会过滤出一个列表的结果，或者是直接选择一个结果，进入到定义这个内容的文件中。跳转到指定行号开发者工具同时也可以在编辑器中直接跳转到指定行号。要启动行号输入框，只需要选中你要查找的文件，然后使用下面的快捷键来启动：Ctrl + L (Windows)Cmd + L (Mac OS X)Ctrl + G (Linux)实时编辑脚本和样式开发工具支持实时编辑脚本和样式，不需要重新加载页面就可以看到效果。这对于测试设计的更改，原生 JavaScript 函数或者代码块很有帮助。脚本JavaScript 可以直接在 Sources 面板中进行编辑。打开指定的脚本进行编辑，或者：在元素面板的视图中点击相应脚本的链接（例：\）或者从 Scources 子面板中选择脚本的文件名：这会在右边的面板上显示一个新的标签，里面的源文件将会是语法高亮的。对于脚本的更改只会在评估时间执行，也就是说对代码的修改不是在页面加载后进行的话，将不会产生效果。修改后的代码会在下一个阶段执行，比如鼠标滑过监听或者点击事件的回调更改后可以快速进行测试。获取更多有关 JavaScript 在 Sources 面板进行调试的信息，请关联阅读在 JavaScript 排错 文档。同时也可以查看 在线编辑器上的短屏幕截取和断点排错。提示：工作空间对于本地文件的持续编辑也是支持的。查看更多样式下面有一个和编辑样式类似的工作流。打开开发者工具，选择元素面板。在右边，一些子面板将会被显示出来，其中就包括样式面板。检查在页面上的某个元素将会在风格面板上显示一组已经被应用到当前节点的属性，并且会按选择器进行排序。在 "element.style" 部分会显示在页面标记中通过样式属性设置的相关属性。下一个部分是 ”Matched CSS Rules“，这里会显示匹配相应节点的选择器，他们的属性和值，甚至是其源文件名，以及读取该样式的行号。选择器匹配的节点将会被设置为黑色，其他的将会显示成灰色。这么做最大的好处就是在于我们在阅读时可以更好的区分选择器筛选出来的东西。在一个子面板中改变任何 CSS 属性，比如一个元素的边界和尺寸，将会将会立刻生效并且在主显示窗口中显示。返回 ”Matched CSS Rules“ 面板，点击在规则旁边的样式表的链接也可以引导你进入 "Sources" 面板。这会显示完整的样式表并且会直接定位到相关的 CSS 规则的行号处。在这里，你可以向使用常规编辑器那样更改文件，并且浏览器会实时显示更改后的效果。另存为如果你对于做出的更改感到满意，你可以