这是我参与「第五届青训营 」笔记创作活动的第15天。活动详情：# 伴学笔记创作活动来袭 ｜ 第五届字节跳动青训营
前端开发调试之 PC 端调试
前端Debug特点：
- 多平台：浏览器、Hybrid、NodeJs、小程序、桌面应用
- 多环境
- 多工具：浏览器 devTools
- 多技巧：Console（日志）、BreakPoint
Chrome devTools
- 点击 .cls开启动态修改元素的class
- 输入字符串可以动态的给元素添加类名
- 勾选/取消类名可以动态的查看类名生效效果
- 点击具体的样式值（字号、颜色、宽高）进行编辑，浏览器内容区域实时预览
- Computed下样式里的箭头可以跳转到styles面板中的css规则
可以用以下方式强制激活伪类：
- 选中具有伪类的元素，点击：hov
- DOM树右键菜单，选中Force State，选中Hover
Console
- console.log
- console.warn 输出警告（黄色）
- console.error 错误信息（红色）
- console.debug
- console.info
- console.log('%s %o %c%s','hello',{name:'tom',age:18},'font-size:24px;color:red','Welcome to bytedance!'); %s字符串 %o对象 %c样式 %d数字
- console.table 具象化的展示JSON数据和数组数据
- console.dir 通过类似文件树的形式展示数据
Sources 展示源代码
- 页面资源文件目录树
- 代码预览区域
- Debug工具栏：暂停、单步跳过、
- 断点调试器 使用debugger添加断点
- scope：列表作用域
- call stack：查看当前javaScript的调用栈
延伸话题
Node.js贡献代码
- 从使用者的角色逐步理解底层细节，可以解决更复杂的问题；
- 自我证明，帮助职业发展
- 解决社区问题，促进社区发展
诊断/追踪
- 诊断是一个低频、重要同时也相当有挑战的方向，是企业衡量自己能否依赖一门语言得到重要参考。
WASM NAPI
- Node.js是执行WASM代码的天然容器，和浏览器WASM是同一运行时，同时Node.js支持WASI
- NAPI执行C接口的代码（C C++ Rust）同时能保留原生代码的性能
