Chrome控制台的使用

以你之姓@ 2022-11-16 01:47 150阅读 0赞

--------------------

# Chrome控制台的使用 #

### **基础：** ###

**打开方式：**

windows:F12

mac:fn+F12

**设置控制台显示位置：**

控制台右侧点击三个小点图标，dock side就可以进行控制台位置的控制  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg5ODMxNQ_size_16_color_FFFFFF_t_70]

**清除信息:**

当想要清除控制台信息时,则可以控制台输入clear或者点击如下图标来进行清除  
![在这里插入图片描述][2021040522343586.png]

### Elements: ###

#### expand recursively： ####

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DAkHxHvJ-1617633182986)(img/elements1.png)\]

一个一个展开小箭头效率会很低？没关系，右键dom中的节点，再使用expand recursively就可把所属所有小箭头展开  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg5ODMxNQ_size_16_color_FFFFFF_t_70 1]

#### `$0` \- `$4` ####

`$0` \- `$4`返回的是 `Elements` 面板中最近选择的五个DOM元素或者 `Profiles` 面板中最近选择5个Javascript堆对象的历史引用。 `$0` 是最近的引用，`$1` 是第二近的引用，依次类推。

#### 给html打断点 ####

dom树也是可以打断点的，选中元素后右键就会出现break on，里面有三个选项，依次是子节点调整，自身属性调整和节点移除，设置好断点后，当dom元素被修正时，代码就会自动停留在修正处

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg5ODMxNQ_size_16_color_FFFFFF_t_70 2]

当需要查看自己打的断点时，在样式右侧点击DOM Breakpoints即可查看  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg5ODMxNQ_size_16_color_FFFFFF_t_70 3]

**还有几个小技巧：**

ctrl+z撤销对节点的修改

拖拽节点，调整节点顺序

### Console: ###

#### 查看控制台自带方法： ####

在控制台输入如下命令：

> console.dir(console)
> 
> 或者输入console  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg5ODMxNQ_size_16_color_FFFFFF_t_70 4]

#### **常用命令:** ####

1.  **console.info** 用于输出提示性信息
2.  **console.error**用于输出错误信息
3.  **console.warn**用于输出警示信息
4.  **console.debug**用于输出调试信息

#### console.dirxml ####

用来显示网页的某个节点所包含的html/xml代码

<body>    
        <table id="mytable">        
            <tr>            
               <td>A</td>            
               <td>A</td>            
               <td>A</td>        
           </tr>        
           <tr>            
               <td>bbb</td>            
               <td>aaa</td>            
               <td>ccc</td>        
           </tr>        
           <tr>            
               <td>111</td>            
               <td>333</td>            
               <td>222</td>        
           </tr>    
        </table> 
    </body> 
    <script type="text/javascript"> window.onload = function () { var mytable = document.getElementById('mytable'); console.dirxml(mytable); } </script>

输出如下:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg5ODMxNQ_size_16_color_FFFFFF_t_70 5]

#### console.dir ####

用来直接将该DOM节点以DOM树的结构进行输出

var myObject = { 
      name:'aa',
      age:12,
      sex:'man',
      myFunc: function () { 
        cpnsole.log('hello');
      }
    };
    console.dir(myObject);

输出如下：  
![在这里插入图片描述][20210405223759994.png]

#### console.count ####

用来统计代码被执行的次数

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg5ODMxNQ_size_16_color_FFFFFF_t_70 6]

#### consol.time/console.timeEnd ####

用来计时，一般做网页优化时可以用到这个  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg5ODMxNQ_size_16_color_FFFFFF_t_70 7]

#### console.assert ####

对输入的表达式进行断言，只有表达式为false时，才输出相应的信息到控制台

![在这里插入图片描述][20210405224045107.png]

### Sources ###

Sources功能面板是资源面板，他主要分为四个部分，四个部分并不是独立的，他们互相关联，互动共同实现一个重要的功能:监控js在执行期的活动。简单来说就是断点。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg5ODMxNQ_size_16_color_FFFFFF_t_70]: /images/20221022/142428c9b5ec477d8a595578957d4b8c.png
[2021040522343586.png]: /images/20221022/426658a0ac9840399f38ab7e38c1e5ac.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg5ODMxNQ_size_16_color_FFFFFF_t_70 1]: /images/20221022/137fdf7e98204e80a327e44b30d2cf44.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg5ODMxNQ_size_16_color_FFFFFF_t_70 2]: /images/20221022/2794e11110df4573a8180235c5420466.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg5ODMxNQ_size_16_color_FFFFFF_t_70 3]: /images/20221022/503ec6106717477c9addb626ec087c64.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg5ODMxNQ_size_16_color_FFFFFF_t_70 4]: /images/20221022/a640e93c4bd241a4983207024878be02.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg5ODMxNQ_size_16_color_FFFFFF_t_70 5]: /images/20221022/901e5c045b984a9983452789eb01009a.png
[20210405223759994.png]: /images/20221022/47660654831b4821afe6a27e76ddb6ba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg5ODMxNQ_size_16_color_FFFFFF_t_70 6]: /images/20221022/43308155ea9e43e980bc166f2dc0a1b8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg5ODMxNQ_size_16_color_FFFFFF_t_70 7]: /images/20221022/ff1d5067b4fc4184ac72adb806cec3c8.png
[20210405224045107.png]: /images/20221022/2c413d0de8ef46daad26363fd761d5ee.png