元素-Elements

  • 修改HTML。编辑、复制、粘贴；复制 XPath；隐藏元素；展开/折叠子项；强制状态：active、hover、focus等
  • 修改样式

控制台-Console

输出

  1. console.log
  2. console.table
  3. console.group console.groupEnd
  4. console.time console.timeEnd

过滤

监听

监听变量或对象属性变化

网络-Network

  • 保留日志。持续记录网络请求日志不清除
  • 禁用缓存。不缓存，一直从服务器端加载资源
  • 模拟网络状况
  • 导入 HAR 文件、导出 HAR 文件
  • 编辑并重新发送；重播 XHR【重发】；复制链接地址、请求标头、响应标头、响应；复制为 cURL、fetch、HAR

模拟网络状况

  1. online 正常联网情况
  2. offline 断网情况
  3. fast3G 快速 3G 情况
  4. slow3G 慢速3G 情况
  5. 自定义网络「支持自定义上传、下载速度，延迟时间」

小技巧

  • 前端调试时，如果只想看下发出的请求数据，不想走后台改变数据，可以设置 网络-脱机。不用加代码输出请求参数日志了

源代码-Sources

本地开发环境

  • Command + P 查找文件，支持 Vue、js
  • debug 断点
  • debug 条件断点

线上环境

  1. 页面-选中项目文件夹-右键-在文件夹中搜索
  2. 下面搜索栏中输入 关键词，打开搜索结果的文件
  3. Ctrl + F 打开当前文件内容搜索框，输入 关键词，即可搜索到该文件中指定关键词
  4. 添加断点，再次触发，进行调试

应用程序-Application

  • 本地存储：this.$ls

Vue 调试

参考《Vue-devtools》

其它

使已缓存的 js文件失效

在引入 js 的代码处，添加或修改版本，示例

在jquery.easyui.min.js后面添加?v=1或修改版本号

1
<script type="text/javascript" src="${pageContext.request.contextPath}/views/js/jquery-easyui-1.3.5/jquery.easyui.min.js?v=1" charset="utf-8"></script>

Chrome 清除缓存

保留 cookies 「避免重新登录」

image-20201118161659701