原文：Chrome开发者工具详解（一）之使用断点来调试代码上
.断点调试是啥 难不难 断点调试其实并不是多么复杂的一件事，简单的理解无外呼就是打开浏览器，打开sources找到js文件，在行号上点一下罢了。操作起来似乎很简单，其实很多人纠结的是，是在哪里打断点 我们先看一个断点截图，以chrome浏览器的断点为例 步骤记住没 用chrome浏览器打开页面 按f 打开开发者工具 打开Sources 打开你要调试的js代码文件 在行号上单击一下，OK 恭喜你的 ...
2018-12-25 16:27 0 1717 推荐指数：
相关推荐
很多人不了解 Chrome Dev Tools （开发者工具）的使用方法和技巧。 其中很多技能，无论是前端开发从业者，还是普通用户，了解一些还是对日常很有帮助的。 本猿定期录制、甚至根据您的需求来订制一些小短片，帮助您掌握开发技巧。 适用人群： 计算机爱好者、web 前端开发入门者、物联网 ...
Chrome Web 开发者工具页面结构与样式 浏览器开发者工具的使用是Web前端开发工程师必须要掌握技能。本文介绍的是chrome自带的开发者工具，首先从页面的结构和样式来介绍。本文的目的是介绍chrome开发者工具的基础用法。或许你用别的工具，如firebug或IE的开发者工具，但本文介绍 ...
源代码资源面板：调试JavaScript页面源代码，进行断点调试代码； Application应用面板 ...
拿到了春招offer，跑来公司实习。项目巨大。同事(前辈+大佬)们都用 Chrome 调试器来找 bug，就我，像刚进城似的，使用 console 来调试 bug。速度和效率都被爆了。 事实证明，代码量少的时候，使用 console/alert 还行，当项目代码一大，特别是 ...
谷歌浏览器（通常简称为 Chrome ）是由谷歌开发的网络浏览器。在开发工作中，Chrome极大的方便开发调试代码。 主流的浏览器都内置了 DevTools，掌握 Chrome 的调试技巧，可以提高工作效率。对于测试人员来说，掌握Chrome 的调试技巧，可以快速判断一些前后端问题，抓取协议 ...
Chrome开发者工具详解(3)-Timeline面板 注： 这一篇主要讲解面板Timeline，参考了Google的相关文档，主要用于公司内部技术分享。。 注： 这一篇主要讲解面板Timeline，参考了Google的相关文档，主要用于公司内部技术分享。。 Timeline面板 ...
Chrome开发者工具面板 面板上包含了Elements面板、Console面板、Sources面板、Network面板、 Timeline面板、Profiles面板、Application面板、Security面板、Audits面板这些功能面板。 ...