7月31日 打卡day8
今日学习：原来调试还有这么多方式，一起学习吧！
调式方式：打印输出、普通断点、条件断点、DOM断点、VS code 断点等
1、console
①console.log，多个变量需要直接输出时，没办法查看对应名称，可以添加一个中括号，同时借助ES6的属性的简洁表示法
②console.warn，警告信息，用于代码存在不合理或不符合规范但不影响系统运行的提示
③console.error，错误信息，用于代码错误和异常的提示
④console.time和console.timeEnd，一般是配合使用，用于计算代码段的执行时间，有助于性能调试和判断
⑤console.assert，第一个参数为 false（例如null，undefined，''，0，或者结果为false的逻辑等）时，输出错误日志，可减少书写判断逻辑，用于判断空值或者false逻辑还是很有用处的
⑥console.dir，DOM节点的打印输出，区别于console.log，会以标签的形式输出
⑦console.table，将数组（或者是 类数组 的对象，或者就是一个 对象 ）打印成一个表格，对于预览还是有挺大帮助的
⑧console.$i，在扩展程序Console Importer作为辅助工具下，可以在 devtool 开发者工具直接使用npm包
2、breakpoint断点调试
①直接断点：打开 Chrome 开发者工具，在Sources源代码面板，找到需要断点的文件，点击对应的行数，就能实现断点
②代码断点：在需要断点的地方，书写debugger就能实现断点
③快捷键ctrl+p弹出文件搜索弹窗，直接输入文件名称就能实现查询，输入英文冒号:，输入想要跳转的行数，就是实现快速跳转到对应行
④行数右键点击，选择Add conditional breakpoint...，输入对应的逻辑判断
今日学习：原来调试还有这么多方式，一起学习吧！
调式方式：打印输出、普通断点、条件断点、DOM断点、VS code 断点等
1、console
①console.log，多个变量需要直接输出时，没办法查看对应名称，可以添加一个中括号，同时借助ES6的属性的简洁表示法
②console.warn，警告信息，用于代码存在不合理或不符合规范但不影响系统运行的提示
③console.error，错误信息，用于代码错误和异常的提示
④console.time和console.timeEnd，一般是配合使用，用于计算代码段的执行时间，有助于性能调试和判断
⑤console.assert，第一个参数为 false（例如null，undefined，''，0，或者结果为false的逻辑等）时，输出错误日志，可减少书写判断逻辑，用于判断空值或者false逻辑还是很有用处的
⑥console.dir，DOM节点的打印输出，区别于console.log，会以标签的形式输出
⑦console.table，将数组（或者是 类数组 的对象，或者就是一个 对象 ）打印成一个表格，对于预览还是有挺大帮助的
⑧console.$i，在扩展程序Console Importer作为辅助工具下，可以在 devtool 开发者工具直接使用npm包
2、breakpoint断点调试
①直接断点：打开 Chrome 开发者工具，在Sources源代码面板，找到需要断点的文件，点击对应的行数，就能实现断点
②代码断点：在需要断点的地方，书写debugger就能实现断点
③快捷键ctrl+p弹出文件搜索弹窗，直接输入文件名称就能实现查询，输入英文冒号:，输入想要跳转的行数，就是实现快速跳转到对应行
④行数右键点击，选择Add conditional breakpoint...，输入对应的逻辑判断
展开
评论
点赞
![[微笑]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_1.7d9f699.png)
，官方包邮。
~
doc.hutool.cn