你可能不知道的Chrome-devtools用法总结

常用快捷键

在 Mac 上应用 Cmd + Shift + C) 在审查模式下打开开辟者对象或是在开辟者对象已经打开的情况下开启查阅选项。
在Source选项， Cmd + o (Mac OS X) 可以搜刮文件， Cmd + Shift + o (Mac OS X) 搜刮文件中的对应函数/特定选择器的一个选择框。
Cmd + L (Mac OS X) 跳转到指定行号。
要打开抽屉式控制台，你须要在键盘上按下 Esc 键或者点击开辟者对象窗口右上角的 Show Drawer 按钮。

Snippets是一个新的可以在这个开辟流程中应用的开辟者对象，它许可你在源面板中创建，存储和履行 JavaScript。

书签所有你的书签可以作为片段进行存储，特别是那些你可能想编辑的。
实用对象调试对象可以和当前页面进行交互，并且可以保存和调试。一个社区企划的列表已经被供给。
Debugging Snippets供给了一个语法高亮显示并且可持续的多行控制台，如许使得底时菌码比单行要加倍便捷。
Monkey-patching code你想要在运行时修复的代码可以经由过程 Snipptes 来完成，尽管多半时刻你可能只是在源面板中及时编辑代码。

如不雅你想在控制台中，履行 snippet 的一些特别行中的代码，你可以在编辑器中选中这些代码，然后右键，选择 Evaluate in Console 选项来进行履行。

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"]);

你可能不知道的Chrome-devtools用法总结

控制台

console.assert() 办法仅仅只当它的第一个参数为 false 时才显示一个缺点信息字符串(它的第二个参数)

断言

鄙人面的代铝闼楝如不雅在列表中的子节点的数量跨越 500，将会在控制台中引起缺点信息。

示例：

结不雅：

你可能不知道的Chrome-devtools用法总结

输出分组

你可以经由过程分组敕令把相接洽关系的输出信息分在一路。 group 敕令经由过程一个字符串的参数来给你的组定名。控制台将会把所有所有的输出信息组合到一块。要停止分组，你只须要调用 groupEnd 即可。

示例代码

var user = "jsmith", authenticated = true, authorized = true; 
// Top-level group 
console.group("Authenticating user '%s'", user); 
if (authenticated) { 
    console.log("User '%s' was authenticated", user); 	
			 1/3    1 2 3 下一页 尾页	
			

　　推荐阅读
　　老生常谈-从输入url到页面展示到底发生了什么
            
            阅能干次    输入地址    浏览器查找域名的 IP 地址    浏览器向 web 办事器发送一个 HTTP 请求    办事器的永远重定向响应    浏览器跟踪重定向地址    办事器处理请求    办事器返回一个>>>详细阅读


本文标题：你可能不知道的Chrome-devtools用法总结
地址：http://www.17bianji.com/lsqh/34726.html
 1/2    1