前端开发之——Chrome调试

524 阅读2分钟

这是我参与更文挑战的第18天,活动详情查看:更文挑战

1、 认识DevTools

快捷键F12打开Chrome的DevTools,我们就会看到如下界面:

image.png

  • 【Elements】:元素面板,查看Web页面的HTML与CSS,最重要的是可以双击元素,对当前页面进行修改!调试页面样式会非常非常方便!
  • 【Console】:控制台面板,JavaScript输出信息的控制台,在这里可以查看到JS的错误信息,也可以执行键入的JS脚本。
  • 【Sources】:源代码面板,我们在这个页面对JS代码进行调试,可设置断点。
  • 【Network】:网络面板,可以明确的查看到访问Web页面所产生的全部请求(包括应答状态、响应时间、数据量等信息)和下载的资源文件,并可以模拟不同的网络状态(在线、离线、3G等)下对Web的加载情况,可以用于分析和优化网页加载性能。
  • 【Performance】:性能面板,记录和查看Web页面在浏览器中运行时的性能表现(注意是运行时,而不是加载时),主要用于发现Web页面运行时性能瓶颈和性能调优。
  • 【Memory】:内存面板,记录执行JS函数对CPU和内存的使用情况,可以识别开销大的JS函数,跟踪内存泄露,帮助代码优化,提高JS执行性能。
  • 【Application】:应用面板,记录Web页面加载的所有资源信息,包括存储数据、缓存数据、图片、字体、JS脚本、CSS样式表等。
  • 【Security】:安全面板,查看Web页面的安全和认证情况,确保网站上正确地实现了HTTPS。
  • 【Audits】:审计面板,从性能(Performance)、PWA兼容性(Progressive Web App)、可访问性(Accessibility)、最佳实践(Best Practices)、搜索引擎优化(SEO)这五个维度给你的网站打分,并给出一份评估报告和优化建议,可以说是非常的强!

2、console({})

image.png

3、使用console.table来打印多条目数据

image.png

4、 格式化调式代码

image.png

5、 在源代码中搜索

如果你希望在源代码中搜索要怎么办呢?在页面已经加载的文件中搜寻一个特定的字符串,快捷键是Ctrl + Shift + F (Cmd + Opt + F),这种搜寻方式还支持正则表达式哦。

image.png