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
     
  • 相关阅读:
    matplotlib数据可视化之柱形图
    xpath排坑记
    Leetcode 100. 相同的树
    Leetcode 173. 二叉搜索树迭代器
    Leetcode 199. 二叉树的右视图
    Leetcode 102. 二叉树的层次遍历
    Leetcode 96. 不同的二叉搜索树
    Leetcode 700. 二叉搜索树中的搜索
    Leetcode 2. Add Two Numbers
    Leetcode 235. Lowest Common Ancestor of a Binary Search Tree
  • 原文地址:https://www.cnblogs.com/dinghailong128/p/15368538.html
Copyright © 2011-2022 走看看