Genluo
commented
4 years ago Open Genluo opened 4 years ago
Genluo
commented
4 years ago Genluo
commented
4 years ago 在启动程序的时候添加 --trace_gc 参数，V8 在进行垃圾回收的时候，会将垃圾回收的信息打印出来：
Genluo
commented
4 years ago TypeScript代码？在vscode中调试TypeScript主要有这样几步：
TypeScript的环境tsconfig.json中的path配置，需要启动时候使用tsconfig-path进行解析路径首先确定node的版本，可以使用'launch.json'中的配置项runtimeVersion,前提是你需要安装nvs或者nvm和对应的node版本，这个配置在vsCode层面支持，配置代码如下：
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "dev",
"skipFiles": [
"<node_internals>/**"
],
"runtimeExecutable": "node",
"runtimeVersion": "13.1.0",
}
]
}TypeScript执行环境因为中间我们需要将项目中的tsconfig.json对应起来，我们可以将这些逻辑抽离成一个文件进行注册，代码如下：
// tshooks.js
const path = require('path');
const tsconfigPath = path.resolve(__dirname, './tsconfig.json');
// 注册ts-node
require('ts-node').register({
project: path.resolve(tsconfigPath),
});launch.json中如下:{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "dev",
"skipFiles": [
"<node_internals>/**"
],
"runtimeExecutable": "node",
"runtimeVersion": "13.1.0",
"runtimeArgs": [
"--require",
"${workspaceFolder}/tshook.js",
],
}
]
}tsconfig.json中配置的path路径执行解析第三部就是如果在tsconfig.json中配置path配置项，执行执行文件需要解析，我们可以使用tsconfig-path进行解决，对应我们可以创建一个启动文件如下：
// bootstrap.ts
import tsConfig from '../tsconfig.json';
import path from 'path';
const tsConfigPaths = require('tsconfig-paths');
const baseUrl = path.resolve(__dirname, '../');
const cleanup = tsConfigPaths.register({
baseUrl,
paths: tsConfig.compilerOptions.paths,
});
require('./index.ts') // 程序主文件
cleanup();
我们可以将这些步骤封装到一个shell文件中，简化launch.json中的配置，代码如下：
#!/usr/bin/env node
const path = require('path');
const bootstrapPath = path.resolve(__dirname, '../src/bootstrap.ts');
const tshookPath = path.resolve(__dirname, '../tshook.js');
// 执行ts effect操作
require(tshookPath);
// 执行源代码
require(bootstrapPath);现在我们就可以简化launch.json中的配置项,最终内容如下：
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "dev",
"skipFiles": [
"<node_internals>/**"
],
"runtimeExecutable": "node",
"runtimeVersion": "13.1.0",
"args": [
"${workspaceFolder}/cli/main.js",
"dev",
],
"cwd": "/Users/ligen/code/github/TEMPLATE/test",
}
]
}因为使用webpack打包之后，调试时候设置断点，vsCode触发这个断点，会直接跳到一个read-only文件中进行查看，同时如果我们使用Step into有可能跳到打包之后的的代码，同时整个项目是为了做一个node工程工具，所以不存在浏览器运行的需要，运行时需要加载ts文件，所以这次直接就去掉webpack打包这个过程，直接使用ts-node来执行整个项目，改变之后的效果很赞：
Genluo
commented
1 year ago chrome 调试技巧： https://juejin.cn/book/6844733783166418958/section/6844733783204167693?utm_source=course_list
你可以通过全局的方法 copy() 在 console 里 copy 任何你能拿到的资源，包括我们在后面[第六节]会提到的那些变量。例如 copy($_) 或 copy($0)
通过 Capture full size screenshot 命令。请注意，这里说的是全屏，并不是嵌入页面的一部分。一般来说这可是得使用浏览器插件才能做到的事情！
我们总是需要打印各式各样的信息，之前我们讨论了如何让输出的信息更加直观，但是如果我们需要打印相关的时间信息呢？这就用到了计时的相关操作。
如果你想要给你的应用中发生的事件加上一个确切的时间记录，开启 timestamps 。你可以在设置(在调试工具中的 ⋮ 下拉中找到它，或者按下 F1 )中来开启或者使用 Commands Menu：
在特定的时刻和特定的执行上下文上查看有哪些对象
monitor 是 DevTools 的一个方法， 它能够让你 “潜入” 到任何 _function calls(方法的调用) 中：每当一个 被潜入 的方法运行的时候，console 控制台 会把它的实例打印出来，包含 函数名 以及 调用它的参数 。
说到 Drawer 大部分的朋友可能都很陌生，那 Drawer 是个什么东西？ Chrome DevTools 有很多部分，被分为9个 tab (俗称选项卡) ( Elements ， Console ， Sources ， Network ， 等等...)
但是，那仅仅是它的一部分而已！有一组平行的选项卡，被隐藏在主窗口之下。这个组合被称为 Drawer 当你在 DevTools（任何选项卡）中时，按 [esc] 来显示它，再次按 [esc] 隐藏它：
可以在chrome 中通过 command 命令来展示当前页面的帧率，或者也可以在 Drawer 中打开帧渲染统计信息来打开
前端调试
node调试
1、在vscode中调试
2、在chrome中调试
3、node中远程调试
此时，nodejs 不会进入到命令行模式，而是直接执行代码，但是依然会开启内建调试功能，这就意味着我们具备了远程调试 NodeJS 代码的能力，使用 --debug 参数打开服务器的 nodejs 文件，然后通过：
可以在本地远程调试 nodejs 代码。不过这里需要区分下 --debug 和 --debug-brk，前者会执行完所有的代码，一般是在监听事件的时候使用，而后者，不会执行代码，需要等到外部调试接入后，进入代码区。语言表述不会那么生动，读者可以自行测试下。
默认端口号是 5858，如果这个端口被占用，程序会递增端口号，我们也可以指定端口：