【Uniapp】新手入门必须掌握开发工具的代码断点调试步骤

Uniapp项目是用HBuilder X开发工具做的, 掌握这个开发工具基本的代码断点调试步骤，新手可以更加有效地进行代码调试和找出问题并得到解决。

开发工具

点击开发工具的预览按钮, 就会打开内置浏览器,

内置浏览器

这时, 可以看到项目修改后的页面显示的实时效果,

这里点击显示开发者工具的图标, 如下图

这会显示开发者工具, 跟Chrome浏览器的开发者工具一样, 如下图

竖屏显示不够宽吧, 就点击上图的按钮, 可弹出独立窗体显示

这内置的开发者工具看者像是从Chrome内核浏览器中移植过来的,

这内置浏览器版本比较旧, 有未知bug会影响使用,

运行到浏览器

最好是, 点击运行到浏览器 如下图,

通常是按组合键Shift+Ctrl+I, 就能打开浏览器的开发者工具,

这浏览器里的开发者工具在使用上是不错的,

开发者工具

一般人不会告诉你的自查自纠方法与技巧;

新手入门必须掌握的代码断点调试步骤包括以下几点：

设置断点

接下来，需要了解并设置断点，以便在代码执行过程中暂停执行；

在需要打断点的代码里,添加一行代码如下

debugger;

它的作用就是打开调试器, 自动定位到执行的代码, 像下图这样

然后,点击浏览器的重新加载的图标, 重新运行,

它将会运行到Sources源代码的断点处

在源代码里面展示的, 左侧行号就可以设置断点, 如下图

高亮显示蓝色底的行号就是断点,

断点还可以设置很多个, 这样就不需要每次都加debugger,

若设置错了, 重新点击设置的断点所在行号就可取消

执行调试

其次，学会逐步执行代码，以观察代码的执行过程；

在调试器的右侧上边, 如下图, 本人标注为绿色的一排图标键

一排图标键解释顺序如下:

• 第二个怎么说, 是跳过去, 点击后, 如果当前是方法(函数)名,就会执行跳过到下一句;
• 第三个怎么说, 是下去的, 点击后, 如果当前行是方法名, 就下到方法(函数)里, 执行里面第一句代码;
• 第四个怎么说, 是上来的, 点击后, 如果当前行是在方法(函数)里面,就会执行完里面的代码后, 上来到出口, 再到下一句代码;
• 第五个怎么说, 是前进的, 就是点击后, 执行到下一句(行);

查看断点

如果设置了断点, 下次点重新运行, 它都会自动执行到断点处,

方便查看当前的状态, 如下图

在下方的右侧有个Local本地，可查看和修改变量的值，

继续执行

最后，需要掌握如何恢复程序的执行，以便在调试完成后继续运行程序。

如下图, 第一个就是, 点击后就会继续执行,

如没有下一个断点, 就会执行到程序结束

如果执行到死循环了, 在页面交互上看着很卡,

就点击第七个按钮图标, 它就会暂停,

忽略断点

如果认为问题解决了, 可以点击忽略断点, 查看运行是否正常,

如下图, 第六个就是个复选框, 点中就会忽略断点执行,

如果记得住, 可按组合快捷键Ctrl + F8 来切换;
其它的按钮图标也有对应的快捷键, 移动鼠标箭头到它的上面就会提示

通过上述代码的断点调试，我们能够更深入地理解代码的运行逻辑，从而精准地定位bug问题所在并进行修复。

写到这里, 相信新手读者会掌握了,

你是如何处理诸多瑕疵bug漏洞的