标签：场景 浏览器 步骤 前端 点击 实操 演示 控制台 调试
1. 一键重新发起请求
场景：
在和后端联调时用的比较多，快速的重发请求，不用再在页面上点击
步骤：
选中“Network”
点击 Fetch/XHR
选择要重新发送的请求（鼠标点击一下）
右键选择Replay XHR
实操演示：
2.在控制台快速发送请求
场景：
在和后端联调时用的比较多，快速的在控制台重发请求，不用再在页面上点击，可能会有跨域问题，这个可以给浏览器安装插件解决
步骤：
选中“Network”
点击 Fetch/XHR
选择Copy as fetch
控制台粘贴代码
修改参数，回车
实操演示：
3.复制JavaScript变量
举例一个使用场景：
后端需要你组装一个数据格式，然后你经过一系列编写逻辑代码后，通过log打印到控制台时，可以使用copy函数将这个数据发给后端。
注意：copy函数不是由 ECMAScript 定义的，而是由 Chrome 浏览器提供的。使用此功能，你可以将 js 变量的值复制，方便在其他位置使用。
4.控制台获取Elements面板选中的元素
场景：
对于嵌套过深的，或者三方框架等复杂结构时使用；
还可以用 $0.width这种形式获取数据
步骤：
控制台
输入$0
鼠标选择页面上的元素
控制台回车或者输入$0.XX获取属性
实操演示：
5.一键展开所有DOM元素
场景：
调试元素时，在层级比较深的情况下，一个个展开去调试会很麻烦,使用这个方法事半功倍
步骤：
alt + 鼠标点击
mac电脑是 opt + 鼠标点击
实操演示：
6.引用上一次结果
场景：
对于想知道每一步结果非常有用，举个典型的例子：js的链式调用
'xiaoMing'.split('').reverse().join('') //'gniMoaix'
步骤：
使用
$_引用上一次操作的结果，不用每次都复制一遍
实操演示：
7."$"和"$$"选择器
场景
在控制台使用document.querySelector和document.querySelectorAll选择当前页面的元素是最常见的需求了，不过着实有点太长了，咱们可以使用$和$$替代。
步骤：
直接在控制台使用：
$('')代表含义是
document.querySelector选择器$$('')代表含义是
document.querySelectorAll选择器
实操演示：
8.$i直接在控制台安装npm包
场景
有时候想使用比如
dayjs(一款日期格式化插件非常好用)或者lodash（JavaScript方法库，封装了很多常用的功能函数，好用）的某个API，但是又不想去官网查，如果可以在控制台直接试出来就好了。Console Importer 就是这么一个插件，用来在控制台直接安装
npm包。
步骤：
- 安装
Console Importer插件- $i('name')安装npm包
转自：点击领取 https://www.dianjilingqu.com/
标签：场景,浏览器,步骤,前端,点击,实操,演示,控制台,调试 来源： https://www.cnblogs.com/yuanyuzhou/p/16451970.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。