开发者社区> 行者武松> 正文

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

简介:
+关注继续查看

常用快捷键

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

Snippets

Snippets是一个新的可以在这个开发流程中使用的开发者工具,它允许你在源面板中创建,存储和执行 JavaScript。

  • 书签所有你的书签可以作为片段进行存储,特别是那些你可能想编辑的。
  • 实用工具调试工具可以和当前页面进行交互,并且可以保存和调试。一个社区企划的列表已经被提供。
  • Debugging Snippets提供了一个语法高亮显示并且可持续的多行控制台,这样使得调试代码比单行要更加便捷。
  • Monkey-patching code你想要在运行时修复的代码可以通过 Snipptes 来完成,尽管多数时候你可能只是在源面板中实时编辑代码。

如果你想在控制台中,执行 snippet 的一些特殊行中的代码,你可以在编辑器中选中这些代码,然后右键,选择 Evaluate in Console 选项来进行执行。

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

控制台

断言

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

在下面的代码中,如果在列表中的子节点的数量超过 500,将会在控制台中引起错误信息。

示例:


  1. console.assert(list.childNodes.length < 500, "Node count is > 500"); 

结果:

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

输出分组

你可以通过分组命令把相关联的输出信息分在一起。 group 命令通过一个字符串的参数来给你的组命名。控制台将会把所有所有的输出信息组合到一块。要结束分组,你只需要调用 groupEnd 即可。

示例代码


  1. var user = "jsmith", authenticated = true, authorized = true
  2. // Top-level group 
  3. console.group("Authenticating user '%s'"user); 
  4. if (authenticated) { 
  5.     console.log("User '%s' was authenticated"user); 
  6.     // Start nested group 
  7.     console.group("Authorizing user '%s'"user); 
  8.     if (authorized) { 
  9.         console.log("User '%s' was authorized."user); 
  10.     } 
  11.     // End nested group 
  12.     console.groupEnd(); 
  13. // End top-level group 
  14. console.groupEnd(); 
  15. console.log("A group-less log trace."); 

结果:

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

浏览结构化数据

table() 方法提供一个简单的方法来查看相似数据对象。这将给一个数据提供属性并且创建一个头。行数据将会从每一个索引属性值中获取。

示例代码:


  1. console.table([{a:1, b:2, c:3}, {a:"foo", b:false, c:undefined}]); 
  2. console.table([[1,2,3], [2,3,4]]); 

结果:

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

table() 中的第二个参数是可选项。你可以定义任何你想显示的属性字符串数组。

一个使用了对象集合的控制台输出表。

示例代码:


  1. function Person(firstName, lastName, age) { 
  2.   this.firstName = firstName; 
  3.   this.lastName = lastName; 
  4.   this.age = age; 
  5. var family = {}; 
  6. family.mother = new Person("Susan""Doyle", 32); 
  7. family.father = new Person("John""Doyle", 33); 
  8. family.daughter = new Person("Lily""Doyle", 5); 
  9. family.son = new Person("Mike""Doyle", 8); 
  10. console.table(family, ["firstName""lastName""age"]); 

结果:

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

将 DOM 元素格式化成 JavaScript 对象

当你想要在控制台中记录一个 DOM 元素,就显示成了 XML 格式。在元素面板中也会是同样的显示。要显示 JavaScript 格式的信息,你可以使用 dir() 方法或者是在 log() 中使用占位符来替换成你的 JavaScript。

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

使用 CSS 样式来更改控制台输出形式

CSS 格式说明符可以修改在控制台中输出的样式。以你要修饰的文字配上占位符开始,然后在第二个参数中写上你要展示的风格。

更改日志样式

示例代码:


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

结果:

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

计算时间开销

通过 time() 方法可以启动一个计时器。你必须输入一个字符串来识别时间的标记。当你要结束计算的时候,使用 timeEnd() 方法,并且传递一个相同的字符串给构造器。控制台会在 timeEnd() 方法结束的时候,记录下标签以及时间的花销。

关于 JavaScript 执行时间的示例代码以及输出:

示例代码:


  1. console.time("Array initialize"); 
  2.     var array= new Array(1000000); 
  3.     for (var i = array.length - 1; i >= 0; i--) { 
  4.         array[i] = new Object(); 
  5.     }; 
  6. console.timeEnd("Array initialize"); 

结果:

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

当 time() 方法正在执行期间,将会生成一个 时间轴 记录并为其做出注解。这对于追踪应用的使用以及其来源非常有用。

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

反向查找元素

你也可以在任何一个元素上右键然后点击 Reveal in Elements Panel,这样就可以在DOM 中找到它。

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

控制台设置

在开发者工具的设置窗口中的常规选项卡里你可以修改四个控制台设置。

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



作者:佚名

来源:51CTO

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
如何设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云安全组设置详细图文教程(收藏起来) 阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程。阿里云会要求客户设置安全组,如果不设置,阿里云会指定默认的安全组。那么,这个安全组是什么呢?顾名思义,就是为了服务器安全设置的。安全组其实就是一个虚拟的防火墙,可以让用户从端口、IP的维度来筛选对应服务器的访问者,从而形成一个云上的安全域。
19796 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
29130 0
阿里云服务器安全组设置内网互通的方法
虽然0.0.0.0/0使用非常方便,但是发现很多同学使用它来做内网互通,这是有安全风险的,实例有可能会在经典网络被内网IP访问到。下面介绍一下四种安全的内网互联设置方法。 购买前请先:领取阿里云幸运券,有很多优惠,可到下文中领取。
22536 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
16424 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
20690 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
23578 0
腾讯云服务器 设置ngxin + fastdfs +tomcat 开机自启动
在tomcat中新建一个可以启动的 .sh 脚本文件 /usr/local/tomcat7/bin/ export JAVA_HOME=/usr/local/java/jdk7 export PATH=$JAVA_HOME/bin/:$PATH export CLASSPATH=.
14897 0
+关注
行者武松
杀人者,打虎武松也。
17112
文章
2569
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载