├── .gitignore ├── images ├── debug.png ├── smart.png ├── auto-attach.png ├── node.js-debugger.jpg └── vscode-debugger.png ├── src ├── utils.js └── index.js ├── yarn.lock ├── package.json ├── shells └── cp.sh └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /images/debug.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ruochuan12/nodejs-debugging/HEAD/images/debug.png -------------------------------------------------------------------------------- /images/smart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ruochuan12/nodejs-debugging/HEAD/images/smart.png -------------------------------------------------------------------------------- /images/auto-attach.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ruochuan12/nodejs-debugging/HEAD/images/auto-attach.png -------------------------------------------------------------------------------- /images/node.js-debugger.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ruochuan12/nodejs-debugging/HEAD/images/node.js-debugger.jpg -------------------------------------------------------------------------------- /images/vscode-debugger.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ruochuan12/nodejs-debugging/HEAD/images/vscode-debugger.png -------------------------------------------------------------------------------- /src/utils.js: -------------------------------------------------------------------------------- 1 | export function log(argv, ...args) { 2 | if (argv.silent) { 3 | return; 4 | } 5 | console.log(...args); 6 | } -------------------------------------------------------------------------------- /yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | minimist@^1.2.5: 6 | version "1.2.5" 7 | resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602" 8 | integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw== 9 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import { log } from './utils.js'; 2 | import minimist from 'minimist' 3 | const argv = minimist(process.argv.slice(2), { 4 | alias: { 5 | s: 'silent' 6 | }, 7 | boolean: ['silent'], 8 | }); 9 | 10 | function run(){ 11 | console.log('关注公众号若川视野，加我微信：ruochuan12。\n参与源码共读，每周一起学200行左右的源码，共同进步\n'); 12 | console.log('argv', argv); 13 | console.log('\n'); 14 | log(argv, '如果是静默模式，这句不会输出'); 15 | } 16 | run(); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nodejs-debugging", 3 | "version": "1.0.0", 4 | "description": "nodejs-debugging", 5 | "main": "src/index.js", 6 | "type": "module", 7 | "scripts": { 8 | "test": "echo \"Error: no test specified\" && exit 1", 9 | "dev": "node src/index.js" 10 | }, 11 | "bin": { 12 | "ruochuan": "./src/index.js" 13 | }, 14 | "repository": { 15 | "type": "git", 16 | "url": "git+https://github.com/lxchuan12/nodejs-debugging.git" 17 | }, 18 | "keywords": [], 19 | "author": "", 20 | "license": "ISC", 21 | "bugs": { 22 | "url": "https://github.com/lxchuan12/nodejs-debugging/issues" 23 | }, 24 | "homepage": "https://github.com/lxchuan12/nodejs-debugging#readme", 25 | "dependencies": { 26 | "minimist": "^1.2.5" 27 | }, 28 | "engines": { 29 | "node": ">=14.0.0" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /shells/cp.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | function _info(){ 4 | echo -e "\033[32m$1\033[0m" 5 | } 6 | 7 | function _warning(){ 8 | echo -e "\033[33m$1\033[0m" 9 | } 10 | 11 | function _error(){ 12 | echo -e "\033[31m$1\033[0m" 13 | } 14 | 15 | function _green(){ 16 | echo "\033[32m"$1"\033[0m" 17 | } 18 | 19 | function _cyan(){ 20 | echo "\033[36m"$1"\033[0m" 21 | } 22 | 23 | function _blue(){ 24 | echo "\033[34m"$1"\033[0m" 25 | } 26 | 27 | function _magenta(){ 28 | echo "\033[35m"$1"\033[0m" 29 | } 30 | 31 | function _grey(){ 32 | echo "\033[37m"$1"\033[0m" 33 | } 34 | 35 | function _yellow(){ 36 | echo "\033[33m"$1"\033[0m" 37 | } 38 | 39 | function _red(){ 40 | echo "\033[31m"$1"\033[0m" 41 | } 42 | 43 | # 确保脚本抛出遇到的错误 44 | set -e 45 | 46 | _info ' 47 | ------------------------------------- 48 | 把当前项目拷贝到 blog 同步脚本 49 | ------------------------------------- 50 | ' 51 | 52 | cd ../blog/ 53 | # git 54 | git pull 55 | git status 56 | 57 | cd ../nodejs-debugging 58 | 59 | rsync -av --exclude .git/ \ 60 | --exclude .vscode/ \ 61 | --exclude node_modules/ \ 62 | --exclude shells/ \ 63 | --exclude src/ \ 64 | --exclude .gitignore \ 65 | --exclude package.json \ 66 | --exclude yarn.lock \ 67 | . \ 68 | ../blog/docs/debug \ 69 | 70 | echo 71 | 72 | cd ../blog/ 73 | 74 | # git 75 | git pull 76 | git status 77 | git add docs/debug 78 | git commit -m "docs: docs/debug 同步 nodejs-debugging :construction:" 79 | git push 80 | 81 | 82 | echo 83 | 84 | _info ' 85 | ------------------------------------- 86 | 同步完成，并提交到远程仓库 87 | ------------------------------------- 88 | ' 89 | cd - 90 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 新手向：前端程序员必学基本技能——调试JS代码 2 | 3 | ## 1. 前言 4 | 5 | >大家好，我是[若川](https://lxchuan12.gitee.io)。欢迎关注我的[公众号若川视野](https://lxchuan12.gitee.io)，最近组织了[源码共读活动](https://juejin.cn/pin/7005372623400435725)，感兴趣的可以加我微信 [ruochuan12](https://juejin.cn/pin/7005372623400435725) 参与，如今已进行三个月，大家一起交流学习，共同进步，很多人都表示收获颇丰。 6 | 7 | 想学源码，极力推荐之前我写的[《学习源码整体架构系列》](https://juejin.cn/column/6960551178908205093) 包含`jQuery`、`underscore`、`lodash`、`vuex`、`sentry`、`axios`、`redux`、`koa`、`vue-devtools`、`vuex4`、`koa-compose`、`vue 3.2 发布`、`vue-this`、`create-vue`、`玩具vite`等10余篇源码文章。 8 | 9 | 最近组织了[源码共读活动](https://juejin.cn/pin/7005372623400435725)，公众号：若川视野，回复"源码"参与，每周大家一起学习200行左右的源码，共同进步。常有小伙伴在微信群里提关于如何调试的问题，而我写的调试方法基本分散在其他文章中。所以特此写一篇关于调试的文章。此外，之后写文章也可以少写些调试相关的，只需持续更新这篇文章。 10 | 11 | [本文仓库地址，求个`star`](https://github.com/lxchuan12/nodejs-debugging.git) 12 | 13 | 阅读本文，你将学到： 14 | 15 | ```bash 16 | 1. 学会基本调试技能 17 | ``` 18 | 19 | ## 2. 推荐安装或者更新到最新版 VSCode 20 | 21 | 官网下载安装 [VSCode](https://code.visualstudio.com/)。 22 | 23 | >如果你的`VSCode`不是中文（不习惯英文），可以安装[简体中文插件](https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-zh-hans)。
24 | >如果 `VSCode` 没有这个调试功能。建议更新到最新版的 `VSCode`（目前最新版本 `v1.62.2`）。 25 | 26 | ## 3. 配置 auto-attach 27 | 28 | `VSCode` 调试 JS 的方法有很多，目前比较推荐的就是无需配置的 `auto-attach`。 29 | 30 | **默认无需配置，超级好用** 31 | 32 | 按 `ctrl + shift + p`，打开输入 `>auto attach`。默认是智能（`smart`）。如果不是，可以查看设置成智能，或者根据场景自行设置成其他的。 33 | 34 | ![auto attach](./images/auto-attach.png) 35 | 36 | ![默认智能](./images/smart.png) 37 | 38 | 更多可以查看官方文档：[nodejs-debugging](https://code.visualstudio.com/docs/nodejs/nodejs-debugging) 39 | 40 | ## 4. 调试 Node.js 代码 41 | 42 | 我特意新建了一个仓库。供读者动手实践。 43 | 44 | ```bash 45 | git clone https://github.com/lxchuan12/nodejs-debugging.git 46 | cd nodejs-debugging 47 | # npm i -g yarn 48 | yarn install 49 | ``` 50 | 51 | 一般来说，从 `package.json` 文件查看入口，其中 `main` 字段会说明入口文件是什么。同时查看 `scripts` 脚本文件。 52 | 53 | 一般提前在入口文件打好断点。 54 | 55 | ### 4.1 调试操作方式 56 | 57 | **操作方式一：package.json** 58 | 59 | 在 `package.json` 找到相应的 `scripts`。鼠标悬浮在相应的命令上，会出现`运行命令`和`调试命令`两个选项，选择 `调试命令` 即可进入调试模式。或者点击 `scripts` 上方的 `调试`，再选择相应的命令。也可以进入调试模式。 60 | 61 | ![选择调试模式](./images/debug.png) 62 | 63 | **操作方式二：终端命令** 64 | 65 | 通过快捷键 ctrl + ` 反引号 打开终端。或者通过 `查看 —— 终端` 打开 `VSCode` 终端。 66 | 67 | 在终端进入到目录。执行相应的脚本。 68 | 69 | `VSCode` 则会自动进入到调试模式。如下图所示： 70 | 71 | ![vscode 调试源码](./images/vscode-debugger.png) 72 | 73 | 接着我们看按钮介绍。 74 | 75 | ### 4.2 调试按钮介绍 76 | 77 | 详细解释下几个调试相关按钮。 78 | 79 | - 1. 继续（F5）: 点击后代码会直接执行到下一个断点所在位置，如果没有下一个断点，则认为本次代码执行完成。 80 | - 2. 单步跳过（F10）：点击后会跳到当前代码下一行继续执行，不会进入到函数内部。 81 | - 3. 单步调试（F11）：点击后进入到当前函数的内部调试，比如在 `fn` 这一行中执行单步调试，会进入到 `fn` 函数内部进行调试。 82 | - 4. 单步跳出（Shift + F11）：点击后跳出当前调试的函数，与单步调试对应。 83 | - 5. 重启（Ctrl + Shift + F5）：顾名思义。 84 | - 6. 断开链接（Shift + F5）：顾名思义。 85 | 86 | ![VSCode 调试 Node.js 说明](./images/node.js-debugger.jpg) 87 | 88 | 调试走到不是想看的文件时（或者完全不是这个目录下的文件时），可以选择单步退出按钮或者重新调试。 89 | 90 | ## 5. 其他调试 91 | 92 | 由于很多项目都配置了代码压缩，难于调试。所以开发环境下，一般通过配置生成 `sourcemap` 来调试代码。大部分开源项目（比如vue、vue-next源码）也会在贡献指南中说明如何开启 `sourcemap`。 93 | 94 | 普通 `webpack` 配置 95 | 96 | ```js 97 | devtool: 'source-map', 98 | ``` 99 | 100 | 调试 `vue-cli 3+` 生成的项目。 101 | 102 | [Vuejs 官方文档调试](https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html) 103 | 104 | ```js 105 | // vue-cli 3+ 106 | module.exports = { 107 | configureWebpack: { 108 | devtool: 'source-map' 109 | } 110 | } 111 | ``` 112 | 113 | `chrome` 调试代码其实也类似。在 `chrome devtools` 的 `source` 面板找到相应文件，去打断点再调试。 114 | 115 | ## 6. 其他参考链接 116 | 117 | 如何调试代码看以下这些参考链接，动手练习可以学会，Node.js 也类似。 118 | 119 | [前端容易忽略的 debugger 调试技巧](https://mp.weixin.qq.com/s/VOoDHqIo4gh3scHVNxk3lA) 120 | 121 | [慕课网调试课程](https://www.imooc.com/learn/1164) 122 | 123 | [掘金 chrome 免费小册](https://juejin.cn/book/6844733783166418958) 124 | 125 | [慕课网 nodejs 调试入门](https://www.imooc.com/learn/1093) 126 | 127 | ## 7. 总结 128 | 129 | 文章比较详细的介绍了 `VSCode` 调试 `Node.js` 调试代码的基本技能，`Chrome` 调试代码其实也是类似。**调试代码是前端程序员基本技能，必须掌握**。组织了源码共读活动发现很多人都不会，或者说不熟悉。让我感到十分诧异。所以写下这篇文章分享给读者。 130 | 131 | 建议大家可以克隆我的项目，动手实践，多操作几次就熟悉了。 132 | 133 | ```bash 134 | git clone https://github.com/lxchuan12/nodejs-debugging.git 135 | cd nodejs-debugging 136 | # npm i -g yarn 137 | yarn install 138 | ``` 139 | 140 | 最后可以持续关注我@若川。欢迎加我微信 [ruochuan12](https://juejin.cn/pin/7005372623400435725) 交流，参与 [源码共读](https://juejin.cn/pin/7005372623400435725) 活动，大家一起学习源码，共同进步。 141 | 142 | --------------------------------------------------------------------------------