chrome-实用技巧

chrome-实用技巧

一、快速请求重发-(可用于问题复现)

重发请求,这有一种简单到发指的方式

  1. 选中Network

  2. 点击Fetch/XHR

  3. 选择要重新发送的请求

  4. 右键选择Replay XHR

chrome-实用技巧

 但是经过实际使用调研,发现它只适用于axios或类似方式使用xhr api,则XHR仍在重放,但是,如果使用新的api fetch,则需要使用其他方法,如下:

chrome-实用技巧

chrome-实用技巧

 此方式还可以直接修改请求的参数,重新发起请求非常好用

二、复制控制台的复杂对象

如果直接复制粘贴会乱码

chrome-实用技巧

 现在当你想复制样式代码时,只需要鼠标右键然后点击 Copy declaration 就可以实现复制了

chrome-实用技巧

三、聚焦于具体dom

可先鼠标选中具体dom元素,出现$0标识,然后切换进入控制台,键入$0即可打印出该dom元素

chrome-实用技巧

 chrome-实用技巧

 四、控制台引用上一次执行的结果

变量的递归使用例如:

'fatfish'.split('').reverse().join('') 

如果要查看每次的结果可以在控制台使用$_引用上一次操作的结果

// 第1步
'fatfish'.split('') // ['f', 'a', 't', 'f', 'i', 's', 'h']
// 第2步
$_.reverse() // ['h', 's', 'i', 'f', 't', 'a', 'f']
// 第3步
$_.join('') // hsiftaf

五、浏览器直接引入插件使用

有时候想使用比如dayjs或者mockjs的某个API,但是又不想去官网查,如果可以在控制台直接试出来就好了。

Console Importer 就是这么一个插件,用来在控制台直接安装npm

  1. 安装Console Importer插件

  2. $i('name')安装npm包

如下示例:安装了mockjs,即可在控制台直接使用mockjs的方法去生成mock数据,如果可结合如上第二条所示的直接复制控制台的复杂对象,便可生成自定义规范的随机数据用于平常开发中的模拟数据使用

chrome-实用技巧

例如可生成一组图表数据

chrome-实用技巧

关于mock

声明:本站所有文章,如无特殊说明或标注,均为爬虫抓取以及网友投稿,版权归原作者所有。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧