Chrome开发工具 技巧和窍门.pdf

Chrome开发⼯具 技巧和窍门 技巧和窍门 控制台 编写多⾏命令 当你进⼊控制台的多⾏编写模式时，你可以像标准⽂字编辑器那样使⽤⽂本 块 Shitf + Enter 允许你从控制台进⼊多⾏模式 当你编写的 JavaScript 远⽐单⾏⽂字要复杂的时候，这是⾮常有⽤的 ⼀但你创建了 ⼀个⽂字编写区域，在命令的最后按 Enter 就会开始运⾏ 关于多⾏控制台⽀持持久性问题，请阅读Snippets-该特征可以保存并执⾏开发⼯具中 可⽤的特定 JavaScript ⽚段 检查元素模式的快捷启动⽅式 Ctrl + Shitf + C 或者 Cmd + Shift + C 将会在检查元素模式中打开开发者⼯具 （或者选择让它获取焦点），这样你就可以⽴即检查当前页⾯ 同时焦点全部都会返 回到该页⾯上 在 Mac 上，使⽤ Cmd + Shift + C 也可以达到相同的效果 更多：使⽤控制台 | 开发者⼯具⽂档 对 console.table 命令的 持 这个命令记录了任何使⽤列表布局的数据 下⾯是⼀些例⼦，包括如何使⽤： console.table([{a:1, b:2, c:3}, {a:foo, b:false, c:undefined} ); console.table([[1,2,3 , [2,3,4 ); 也有另⼀个 columns 可选参数，它会以字符串数组的形式展⽰ 下⾯，我们定义了 ⼀个 family 对象，其中包含很多 “Person” ，之后选择⼀⾏来显⽰： 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 ); 同时，如果你仅仅是想输出这些数据中的前两⾏，使⽤： console.table(family, [firstName, lastName ); 更多:对 console .table 命令的⽀持已经上线 | G+ 预览控制台⽇志对象 ⽇志输出的对象可以使⽤ console .log( ⽅法直接在开发⼯具中预览，⽽不需要更多的 操作 传递多个参数来指定控制台⽇志样式 就像我们之前在⽂档中说过的，你可以使⽤ %c 给你的控制台添加样式，就像你在 Firebug 中⼀样 ⽐如： console.log(%cBlue!, color: blue;); 同样也⽀持多种样式: console.log(%cBlue! %cRed!, color: blue;, color: red;); 更多：在开发者⼯具上让⽇志有⾃⼰的风格 | G+ 清理控制台历史的快捷键 打开控制台，你可以通过 Ctrl + L 或者 Cmd + L 快捷键 来快速的清理控制台历史.控 制台中的 console .clear( 命令通过 JavaScript 的控制台 API 来完成清除⼯作，就和 shell 下的 clear( ⼀样 成为⼀个键盘忍者 在开发者⼯具上，你可以使⽤ ? 来打开通⽤设置，从那⾥你可以定位到快捷键⾯板来 查看所有⽀持的快捷键 通过控制台使⽤元素 选择⼀个元素然后在控制台中输出 $0 ，它将会使⽤脚本来执⾏ 如果在这个页⾯上已 经有 j Query 对象，你可以使⽤ $($0 来重新选择这个页⾯上的元素 你也可以在任何⼀个元素上右键然后点击 Reveal in Elements Panel，这样就 可以在DOM 中找到它 通过 XPath 表达式查询 DOM XPath 是⼀个在⽂档中选择节点的查询语⾔，⼀般来说返回⼀个节点的集合，字符 串，boolean ,或者数字 你可以在 Javascript 开发者⼯具控制台中使⽤ XPath 表达式来 查询 DOM $x(xpath 命令允许你执⾏⼀个脚本 下⾯的例⼦将会展⽰如何通过 $x(//