0


一天搞定前端必备开发技能(1)——Chrome Dev Tools调试工具的使用

今天给大家带来是Chrome Dev Tools的学习视频课程笔记,这是一个非常棒的调试工具对于前端开发者来说,入门也不难,大家可以观摩观摩参考参考!以下👇出原视频连接🔗,这个博主教的也非常的棒🥳

课程连接:【浏览器调试工具精讲】Chrome Dev Tools精讲,前端必看!

入门介绍

打开调试工具

  • 菜单>更多工具>开发者工具

打开命令菜单

快捷键:

  • CTRL+SHIFT+P
  • Command+SHIFT+P(MAC)

注意:快捷键用不了的,直接点击右上角三个点有,运行命令。

image-20240711111127359

可以使用命令菜单来实现屏幕的截屏,

我们输入:

screenshot

就可以进行以下操作:

image-20240711111541226

常用的Tab面板

image-20240711111704985

面板就是调试工具上方的导航条,每个栏目都代表一个控制面板。我们主要讲Element、Console、Source、Network、Application这五个面板。

Element面板

image-20240711112003753

蓝色部分是内容主体,橙色部分代表的是外边距

margin

image-20240711112209090绿色就是内边距

padding

查找dom元素

快捷键

  • CTRL+F
  • Command+F(MAC)

查询方式:

  • 文本查询
  • CSS选择器
  • Xpath(//节点/标签前面两个/指定在全局范围内去找节点,第二个/标识查找该节点内的标签

可以在Console面板里面使用

inspect(传入一个dom节点)

快速定位节点。

例如:

inspect(document.getElementById('section_seven'))

编辑样式

​ 在Element面板有两个分栏,第一个分栏就是刚刚我们是用代码面板,第二个就是用来修改样式的

Styles

面板。

Styles面板

:显示的是界面所有节点的外观元素。

Compouted面板

:列出所有的样式。

Layout面板

:列入了所有

Grid

Flexbox

布局的容器全部都罗列出来。

Console面板

快速 打开Console控制台面板

快捷键

  • Ctrl+Shift+J
  • Command+Option+J(MAC)

Consoel面板作用:

  1. 执行语句
  2. 浏览器自带API 1. $_返回上一条语句的执行结果image-202407111145475802. $0上一个选择的DOM节点 ($1,$2…以此类推)
  3. 打印语句:console.log()1. console.group()(打印组)image-202407111148497292. console.time()(显示运行时间)image-202407111149193683. console.table()(把一个数组以表格的形式呈现出来)image-20240711115020925

Javascript调试

debugger

dug方法,可触发JavaScript的debug调试。

image-20240711150924742

点击行号就可以打断点。

Network面板

​ 点击右上角红色点表示开始监控网络,如果把他点掉了就会变成灰色,就不会进行监控。

image-20240711151512273

记录两个界面之间的跳转请求。

image-20240711151720596

去除浏览器缓存

image-20240711151922162

节流器,会对请求的速率进行限制

image-20240711151937818

节流器选项:image-20240711151957223

保存浏览器和数据的json格式

image-20240711152229353

Application面板

​ 可以查看一些存在客户端里面存在的一些键值对数据,提供了一系列的功能,帮助开发者调试网页、分析性能、检查网络请求等。

​ 要打开 Chrome DevTools,你可以右键点击网页并选择 “Inspect” 或 “Inspect Element”,或者使用快捷键(Windows/Linux 上是 Ctrl+Shift+I,Mac 上是 Cmd+Option+I)。一旦 DevTools 打开,你可以点击左侧的 “Application” 标签来访问 Application 面板。

“Application” 面板是一个非常重要的部分,它允许开发者查看和管理网页中的资源,包括但不限于:

  1. Cookies:查看和管理网页的 Cookies。
  2. Storage:查看和管理本地存储、会话存储和 IndexedDB。
  3. Cache:查看浏览器缓存的内容。
  4. Frames:查看和管理网页中的 iframe。
  5. Snippets:运行或保存 JavaScript 代码片段。
  6. Overrides:覆盖一些网络请求,例如模拟不同的网络条件或返回自定义的响应。
  7. Service Workers:查看和管理 Service Workers,它们是运行在后台的脚本,可以拦截网络请求并提供离线支持。
  8. Background Services:查看和管理后台服务,如 Push 和 Notifications。
  9. Clear Storage:清除存储的数据,包括 Cookies、本地存储等。

本文转载自: https://blog.csdn.net/qq_65034569/article/details/140354413
版权归原作者 天下无贼! 所有, 如有侵权,请联系我们删除。

“一天搞定前端必备开发技能(1)——Chrome Dev Tools调试工具的使用”的评论:

还没有评论