您好,欢迎来到12图资源库!分享精神,快乐你我!我们只是素材的搬运工!!
  • 首 页
  • 当前位置:首页 > 开发 > WEB开发 >
    你可能不知道的Chrome-devtools用法总结
    时间:2017-04-12 08:16 来源:网络整理 作者:网络 浏览:收藏 挑错 推荐 打印

    在 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

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

    书签所有你的书签可以作为片段进行存储,特别是那些你可能想编辑的。

    实用工具调试工具可以和当前页面进行交互,并且可以保存和调试。一个社区企划的列表已经被提供。

    Debugging Snippets提供了一个语法高亮显示并且可持续的多行控制台,这样使得调试代码比单行要更加便捷。

    Monkey-patching code你想要在运行时修复的代码可以通过 Snipptes 来完成,尽管多数时候你可能只是在源面板中实时编辑代码。

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

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

    控制台

    断言

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

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

    示例:

    console.assert(list.childNodes.length < 500, "Node count is > 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); 

        // Start nested group 

        console.group("Authorizing user '%s'"user); 

        if (authorized) { 

            console.log("User '%s' was authorized."user); 

        } 

        // End nested group 

        console.groupEnd(); 

    // End top-level group 

    console.groupEnd(); 

    console.log("A group-less log trace."); 

    结果:

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

    浏览结构化数据

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

    示例代码:

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

    console.table([[1,2,3], [2,3,4]]); 

    结果:

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

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

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

    示例代码:

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

    (责任编辑:admin)