Cao Note

外观

浏览器技巧 ​

一、快捷键 ​

  • ctrl + R ----- 刷新页面
  • ctrl + W ------关闭页面
  • ctrl + J ----- 打开下载页面
  • ctrl + H -----打开历史记录
  • ctrl + K ---- 快捷搜索
  • ctrl + 1-9 ---- 快速切换 tab
  • ctrl + shift + T -------打开上一次关闭的页面
  • ctrl + shift + J -------打开 f12 控制台
  • ctrl + shift + C ------快速查看元素
  • ctrl + shift + delete --- 清除浏览器历史记录

f12 控制台常用快捷键

  • ctrl + [ | ] ------切换 tab 栏

  • ctrl + L ------清除控制台

  • ctrl + shift + M ------打开手机浏览

  • ESC ---- 打开控制台底部的控制栏

    image-20240712161819060

二、小技巧 ​

  • 通过按 ctrl+shfit+c 可以选中浮动的元素；

  • 打开 f12，在 elments，按下 ctrl+f，可以通过输入选择器来找到选择到的元素；

  • 可以通过双击盒模型直接修改 border、margin 值；

  • 在 style 编辑面板中

    • 上方向键 / 下方向键可以使属性值以 1 递增 / 递减

    • ALT + 上方向键 / 下方向键可以使属性值以 0.1 递增 / 递减

    • SHIFT + 上方向键 / 下方向键可以使属性值以 10 递增 / 递减

    • CTRL + 上方向键 / 下方向键可以使属性值以 100 递增 / 递减

  • 在 f12 中，通过按住 shfit 点击颜色，可以切换颜色的显示值；

  • 获取 hover tips 方法

    • 打开控制台，切换到 source tab
    • 按暂停代码，由于 hover 中没法按，可以使用快捷键 command+F8

三、console 的用法 ​

console 对象的所有属性 ​

image

js
console.log('信息是：%s',str)；可以直接将str变量放进%s位置；
console.clear()：清空控制台
console.assert(v, '') // 当v为假时,输出后面的字符串,否则无输出
console.table()：以table形式输出对象
console.group()：以分组形式输出
console.warn()：以warn形式输出
console.error()：以error形式输出
console.count()：统计代码被执行的次数
console.trace()：显示当前执行的堆栈调用路径,放在最后一个调用的函数中；
console.time()：用来计时一个方法运行多长时间，使用timeEnd来结束；

console.time('func')
console.timeEnd('func')  // 里面名字需要填写一样的;
console.dir()：直观的展示一个对象的所有属性和方法
console.log('信息是：%s',str)；可以直接将str变量放进%s位置；
console.clear()：清空控制台
console.assert(v, '') // 当v为假时,输出后面的字符串,否则无输出
console.table()：以table形式输出对象
console.group()：以分组形式输出
console.warn()：以warn形式输出
console.error()：以error形式输出
console.count()：统计代码被执行的次数
console.trace()：显示当前执行的堆栈调用路径,放在最后一个调用的函数中；
console.time()：用来计时一个方法运行多长时间，使用timeEnd来结束；

console.time('func')
console.timeEnd('func')  // 里面名字需要填写一样的;
console.dir()：直观的展示一个对象的所有属性和方法

console.dir

当输出 dom 元素时，显示的是 dom 元素的对象属性，当 console.log 则是标签；

image-20240712161826117

console.table()

第一个可以传入对象或数组，第二个参数可选，可以单独放入想要展示的内容；

console 对象的所有属性

$符的用法 ​

console 里面可以直接使用$符获取元素，跟 jquery 操作方式一样，

  • $：相当于 querySelector，获取元素
  • $$：相当于 querySelectorAll，获取一组元素
  • $0-4：获取最近 5 个选择过的 dom 节点
  • $_：返回最近一次表达式执行的结果

其他简写：

  • dir、keys、values

image

copy ​

copy(document.body)，将获取到的内容复制到剪贴板，可以粘贴到任意地方

鼠标对对象使用右键 Store as global variable，可以直接将一个对象给复制到剪贴板

image

monitor 事件监听 ​

monitor & unmonitor，接收一个函数名作为参数，当该函数被执行，就会被监听到，unmonitor 用来停止监听的；

image-20240712161900201

monitorEvents 事件监控 ​

monitorEvents&unmonitorEvents，一个为监控事件，一个为解除监听，第一个参数为选中的元素，第二个参数为事件，也可以是数组

js
monitorEvents(window, 'resize')
monitorEvents(window, ['resize', 'scroll'])
monitorEvents(window, 'resize')
monitorEvents(window, ['resize', 'scroll'])

第二个参数也可以放入类型；

类型事件
mouse"mousedown", "mouseup", "click", "dblclick", "mousemove", "mouseover", "mouseout", "mousewheel"
key"keydown", "keyup", "keypress", "textInput"
touch"touchstart", "touchmove", "touchend", "touchcancel"
control"resize", "scroll", "zoom", "focus", "blur", "select", "change", "submit", "reset"

JSON.stringify 来输出格式 ​

使用它的第三个参数，让显示更有格式化效果；

image-20240712161906053

对象需要展开 ​

当查看对象的时候，需要展开才能查看，大大的影响开发效力

image-20240712161911575

原因：(...)是 get/set 类的属性，点击后出现是当前的值，不一定输出 log 的时候的值，如果想直接看 log 时的值，需要console.log(JSON.parse(JSON.stringify($var)))；

页面跳转保留控制台输出 ​

一般用于调试跳转之后输出的内容；

点击右侧小齿轮，之后开启 Preserve log 即可；

image-20240712161917426

四、断点篇 ​

快捷键 ​

  • f8 过程执行，跳过当前断点继续执行（对循环特别有用，可以跳到下一次循环断点处，直接点击页面上的绿色按钮）

  • f10 逐步执行，它会忽略方法体内部，

  • f11 细节语句执行，进入方法体内部

  • shift + f11 细节语句返回主体函数

element 元素断点 ​

image-20240712161923384

  • subtree moditications：当添加改变删除元素时触发
  • Attribute modifications：元素属性改变时触发
  • Node removal：移除这个 dom 元素时触发

当通过 js 操作时，会被跳到当前断点；

黑匣子 ​

当我们打断点时，会跳到源码里面绕一大圈，最终找不到我们想要的东西，无法很快定位到错误的地方，chrome 提供了一个黑匣子（黑名单），在源码文件点击之后，下次跳转就不会进来了；

image-20240712161929756

还可以到设置中，可以自己加需要忽略的库或文件

image-20240712161935810

image-20240712161940366

将以下两个加入到黑匣子，可以解决大部分断点跳插件的问题

js
node_modules
\.min
node_modules
\.min

xhr/fetch 断点 ​

image-20240712161946135

也可以直接对 network 进行断点

image-20240712161955690

五、浏览器插件分享 ​

  1. GitHub Hovercard github 增加头像查看 author，支持多种悬浮窗
  2. Adblock Plus 谷歌广告拦截
  3. Astar 免费翻墙，可看 youtube
  4. 下载+ 下载管理工具
  5. octotree github 左侧固定文件树
  6. gitako 也是文件树，还支持代码折叠
  7. OctoLinker github 代码支持点击路径跳转，支持 package.json 点击到对应仓库
  8. Octohint github 按住方法跳转，还支持类型显示
  9. Ajax Interceptor 修改后端接口响应值
  10. XSwitch 地址转发请求
  11. Material Icons for GitHub github 版的文件图标
  12. smartUp 手势 增加鼠标右键支持快捷操作
  13. 云盘万能钥匙 自动输入百度网盘密钥
  14. Tampermonkey 油猴 支持安装更多的插件插入脚本，非常好用
  15. Infinity 新标签页 新增标签添加快速访问，支持书签关键字搜索
  16. Pesticide 快速查看页面布局信息
  17. 一键管理扩展 当扩展过多时，使用该插件非常方便
  18. Talend API 浏览器版本的 Postman

$i 浏览器使用 npm 插件 ​

安装地址：Console Importer

image

六、codebox ​

在浏览器快速写代码，可以按 ctrl+enter 即可进行输出了；

image-20240712162012480

七、修改 devtools 默认主题 ​

  1. 地址输入 url：chrome://flags/#enable-devtools-experiments，搜索 Developer Tools experiments 并启用；
  2. 控制台中使用F1打开设置，切换到Experiments选项，启用Allow custom UI themes
  3. 从 chrome 商店搜索安装：Material DevTools Theme Collection 扩展程序，之后选择喜欢的主题进行重启即可；（如果选中的是带 Dark 的主题，需要切换对应的默认主题，在settings-->preferences-->theme选项卡；

image-20240712162018945

其他技巧 ​

  1. 选中节点之后，点击 Event Listeners，可以查看当前元素包括冒泡的所有事件，取消勾选 Ancestors All 之后，可以查看当前元素的所有事件

image-20240712162025979

八、DevTools 新功能补充 ​

覆盖请求响应（Override） ​

在 Network 面板右键请求 → Override content，可以修改远程资源的响应内容，适合调试生产环境问题。

录屏（Recorder） ​

Recorder 面板可以录制用户操作并生成 Puppeteer 测试脚本，用于自动化测试。

性能分析（Performance Insights） ​

新版 Performance 面板提供更直观的 Insights 视图，自动标注布局偏移、长任务等性能问题。

Coverage 面板 ​

按 Ctrl+Shift+P → Show Coverage，查看 JS/CSS 代码使用率，找出未使用代码。

摘抄地址 ​

  1. CSDN
  2. segmentfault查看对象
  3. 官网
  4. Chrome DevTools 中的这些骚操作，你都知道吗？
  5. frontendwingman

Copyright © 2024-present xiaocao