zoukankan      html  css  js  c++  java
  • 使用chrome浏览器调试时的搜索技巧

    chrome浏览器具有速度快,兼容性好,稳定,功能强大等优点,现在是市场占有率最高的浏览器。对于程序员来说,它的调试功能特别方便,如果你是一个程序员,不仅仅应该掌握chrome浏览器调试界面的基本使用,还应该学会一些进阶的技巧,在特定的场合能够起到事半功倍的效果。下面介绍一些chrome浏览器的使用技巧。

    使用chrome浏览器调试时的搜索技巧

    搜索

     
    1.  

      搜索元素中的字符串

      在浏览器控制台,选中Elements标签,用鼠标随便点击一个元素,然后按ctrl+f可以搜索html的内容

      使用chrome浏览器调试时的搜索技巧
    2.  

      搜索样式

      样式的方块中,点击Styles或Computed标签,在Filter输入框中输入一个样式,可以从当前页面所使用到的样式中进行筛选。

      使用chrome浏览器调试时的搜索技巧
      使用chrome浏览器调试时的搜索技巧
    3.  

      搜索控制台输出内容

      用鼠标点一下控制台输出窗口,然后按ctrl+f可以搜索console或者报错的内容。还可以设置是否忽略大小写或者是否使用正则表达式。

      使用chrome浏览器调试时的搜索技巧
    4.  

      搜索页面各种文本资源中的字符串

      在Sources->Sources中,随便选择一个文件,然后双击打开,可以在右边使用ctrl+f搜索文本。

      记得先点击"{}"符号整理格式以增加可读性。

      使用chrome浏览器调试时的搜索技巧
    5.  

      全局搜索字符串

      在控制台任何地方按ctrl+shift+f,可以搜索本页用到的所有文本资源中的字符串

      使用chrome浏览器调试时的搜索技巧
    6.  

      按文件名搜索

      在控制台各处,按ctrl+o或者ctrl+p,可以呼出一个文件列表窗口,输入关键词,可以搜索到文件名包含这个词的文件

      使用chrome浏览器调试时的搜索技巧
    7.  

      搜索网络连接

      在Network标签下可以查看和搜索网络连接,大部分按文件名搜索到的文件在这个页面也能搜索到。

      但不是所有的网络连接都是文件,比如xhr请求,ws连接就不是文件。

      使用chrome浏览器调试时的搜索技巧
      END
     
  • 相关阅读:
    Ajax原生请求及Json基础
    HTML5拖拽练习
    表格单元格间数据的拖拽
    query 获取本身的HTML
    JQuery UI的拖拽功能实现方法小结
    ASP.NET MVC4中使用bootstrip模态框时弹不出的问题
    窗口中各模块的切换效果,使用jquery实现
    窗口模块自适应高度
    新jQuery中attr 与 prop的不同
    用js+css3做一个小球投篮的动画(easing)
  • 原文地址:https://www.cnblogs.com/dinghailong128/p/15368538.html
Copyright © 2011-2022 走看看