之前写过用 VSCode Debugger 或者 Chrome DevTools 调试网页和 Node.js 代码，还有各种打断点的方式。 但只是讲了如何使用，很多同学不知道为什么要用 debugge

本期我们的最终目的还是学习如何通过谷歌浏览器调试春节小游戏，应对不同问题的方案。当然，这些小游戏大家还是通过自己努力来完成的才有意义，这样才是尊重游戏开发者。

这是我参与「第四届青训营 」笔记创作活动的的第10天 一.bug 1-1.bug的产生 1-2.前端bug的特点 1）多平台：浏览器、nodejs、桌面应用 2）多环境：本地开发环境、线上开发环境 3

如图↑，直接sources面板中打断点。 若在第6行的空行打断点，看到一个动画显示断点从第六行溜到第七行。vscode的debugger扩展实质就是与这个通信，并反馈结果到自己的ui上。 因此如果你看到vscode中用鼠标打的断点与显示不一致，那么其实是浏览器就是这样做的，只是…

本文暂未涉及Performance面板的内容。 1. Chrome Devtools 的用处 2. 菜单面板拆解 3. 常用命令和调试 1. 呼出快捷指令面板：cmd + shift + p 在Devtools打开的情况下，键入cmd + shift + p将其激活，然后开始在…

最近发现有很多同学在调试代码的时候依旧是一个 log 打天下，着实是有些辛苦。本篇文章，咱们来介绍一下 chrome 开发者工具里一个相当好用、对测试相当友好但是被很多人忽略的面板：源代码面板。

前言 通过debug源码的方式学习 Vue2.6 的整体构建流程，建议先不要关注具体的实现细节。 start 在vue源码中新建 examoples/demo/index.html 文件 修改 pac