专注于
IT技术和业内交流

Chrome DevTools 之 Debug

说在最开始:作为前端工程师最重要的工具之一Chrome DevTools 目前在全网居然都没有一份较新且全的中文文档。为了方便大家学习与促进团队成长,代码山团队开启了这次Chrome DevTools 的翻译任务。为了方便大家阅读与对比,目录结构与developers.google.com保持一致。第一次做这么大的文档翻译,难免疏忽,欢迎大家指正。若转载,还请大家尊重我们的劳动成果,带上来源与地址。

一、远程调试

在真机上检查您网站的布局与性能。

  1. ‎远程调试 Android 设备‎
  2. ‎访问本地服务器‎
  3. ‎远程调试WebViews‎

二、在任何页面上执行片断(snippets)

snippet 是一些简短的脚本,您可以在 Chrome DevTools 的Sources 面板中书写并在任何页面上执行。当你运行一个snippet时,它所执行的上下文指向当前打开的页。

  1. ‎snippet 的使用简介‎

三、调试压缩之后的代码

使用源映射(Source Maps )或 Pretty Point对 压缩之后的代码进行调试。

  1. ‎通过 Pretty point 格式化javascript代码‎
  2. ‎通过 Source Maps 格式化 javascript 代码‎

四、调试 Progressive Web Apps

使用Application 面板来检查、 修改和调试 web 应用程序的manifests, service workersservice worker caches

  1. ‎调试 ProgressiveWeb Apps‎

五、使用断点(breakpoints)

Chrome DevTools 包括功能强大的断点功能,能帮助您查找并修复 JavaScript 代码中的各种错误。

  1. ‎如何设置断点‎
  2. ‎如何通过断点一步步调试你的代码‎

六、安全(Security)

使用Security面板以确保您的站点上的所有资源都使用 HTTPS 都保护。

  1. ‎了解 Security 面板‎

七、使用控制台(Console)

Console面板为你与网页实时交互而生。

  1. ‎Console界面简介‎
  2. ‎诊断、打印log‎
  3. ‎比较类似的数据对象‎
  4. ‎测量和计数‎
  5. ‎异常和错误处理‎
  6. ‎控制台 API 参考‎

八、使用命令行(Command Line)

Console 是一个终端,在开发过程中你可以使用他快速与页面交互。

  1. ‎表达式‎
  2. ‎事件‎
  3. ‎命令行API‎

九、变量跟踪

Chrome DevTools 允许你很容易跟踪查看整个应用程序的所有变量。

  1. 变量跟踪

未经允许,不得转载本站任何文章:代码山 » Chrome DevTools 之 Debug

分享到:更多 ()

专注品牌化高端网站建设

商务服务联系我们