各种调试

最新推荐文章于 2023-09-20 11:16:03 发布

jinhuifen666

最新推荐文章于 2023-09-20 11:16:03 发布

阅读量263

点赞数 1

分类专栏：调试文章标签：调试

本文链接：https://blog.csdn.net/jinhuifen666/article/details/87784482

版权

调试专栏收录该内容

1 篇文章 0 订阅

订阅专栏

控制台调试组件

启动项目，在浏览器打开项目，在浏览器页面调试到你需要修改的页面，在打开的项目页面按‘F12’或者‘右击’–>‘检查’，打开‘Developer Tools’工具，如果这两种都打不开的情况下，可以点击浏览器地址栏右边的三个小点，然后选择‘更多工具’->‘开发者工具’也行。
在‘Developer Tools’上选择‘source’，然后贴图解释了，哈哈

可以在这张图的‘dependence’文件夹下找到你当前需要修改的组件的css文件，js文件，这里我们先从css文件入手

上面就是需要修改的css文件了，样式这个东西吧，说简单也简单，说难就很难，特别是在AWEBIDE里面，调起来就很难受，反正我难受。

修改css文件

在‘Developer Tools’上选择‘Elements’,然后又贴图解释了，哈哈

在需要修改的页面打开调试工具，然后找到需要修改样式的元素，在右边的‘element.style’这个里面写样式，可以直接看到效果，如果样式在这边写好了，会实时的保存到‘WebContent’下的‘dependence’文件夹下需要修改的组件的样式文件，如果这个样式文件里没有这个元素，直接在样式文件的最后加上即可，需要注意的是，样式元素前面最好加上组件的名字，这样能保证修改不会破坏别的组件的样式。

重复此步骤，接着调试其他的样式。当所有样式在控制台调试完毕后，先别急着刷新，把‘source’下的样式文件，‘Ctrl + A’—>‘Ctrl + C’，然后复制到‘IDE’中的组件样式中，将原来的全选删除，粘贴，最后点击‘样式’右上角的‘保存’按钮，完成。（Ps：看‘开发者中心’写的是按下‘Ctrl + S’可以直接保存到本地文件，这种我没有试过，不过为了保险起见，还是‘Ctrl + C’—>‘Ctrl + V’吧）

修改less文件

这边由于我还没有试过用‘less’写，所以借鉴一下‘开发者中心’的，
如果做项目是用‘less’或者’scss‘来写的写，然后编译生成css给项目使用的话，像上面所说的直接修改‘css’就不可用了，因为无论你调试的的是‘elements style’还是直接修改‘css’，都会被‘less’编译生成的‘css’所覆盖，这样是无效的。在这里，我们可以直接修改‘less’文件来达到目的。修改‘less’，‘ctrl+s’ ,gulp自动编译成‘css’，浏览器界面可以看到修改效果，同时本地的‘less’和‘css’也同步实时保存更新。

修改JS文件

为了方便开发，控制台报错的时候，可以直接根据报错的行数点击进去，可以快速准确的定位到报错的位置，当然肯定还有别的方法可以打开文件。

在‘Developer Tools’上选择‘source’，然后在‘WebContent’–>‘dependence’下面找到你需要修改的JS文件，单击即可打开。

或者直接‘Ctrl + P’直接输入关键字可以搜索到你想要找到的文件也可以直接打开，如果你没输入错误的话。

大部分情况下为了调试JS文件都会使用断点，断点调试比较清晰，可以很有效的帮我排除我写的霸哥。
第一种就是上面打开JS文件的方法，直接报错信息点进去，然后在报错的行数那边或者有可能跟出错有关的地方打断点，直接在想打断点那行的前面单击，有个类似蓝色的标签出来就表示断点打好了。

第二种方法就是在组件的JS代码需要打断点的地方，输入‘debugger’，然后页面刷新就自动进入控制台断点。

接下来就在浏览器调试工具调试。

其实大部分程序猿都知道怎么在控制台打断点，but，很少有人知道，断点是可编辑的，就是直接在断点‘右击’–>‘Edit breakpoint…’，传说在输入框中填入断点停止的条件，对循环中定位某个数据很有帮助，至于这个帮助有多大，只可意会，不可言传！！！

如果你跟自己的代码心有灵犀，你可以直接‘Ctrl + G’快速定位到所在行。自己尝试一下，奇迹就会发生。

断点的调试的面板每个各司其职，常见功能具体请看下图：

为了让这些功能更容易被理解，我决定挨个解释一下，毕竟不是那么容易能看懂的（一脸认真）：

a) 调试操作区域

从左到右操作分别是:

不断点直接往下执行, 快捷键F8;
往下执行一步, 快捷键F10;
进入当前执行方法体内, 当前执行为原生语句则往下执行一步, 快捷键F11;
跳出当前执行方法体, 快捷键shift+F11;
激活状态时表示不执行任何断点;

b) 变量监控窗口

可以在调试时选中变量右键, 将它添加到监控窗口中去,这样就可以在执行程序时一直在窗口中监控到变量的值.

c) 调用栈窗口

可以看到当前方法的调用栈.

d) 当前执行上下文

可以看到当前执行方法体的上下文指向, 不过这里的上下文指向在不同浏览器中可能会有解析差别, 取决于浏览器厂商对调用上下文的理解, 在此仅作参考;

e) 断点窗口

可以查看当前已经启用的断点, 和正在启用的断点(有勾选上的就是正在启用的);

温馨提示：根据情况酌情使用，太多容易晕！！！因为我经常被自己调晕。。。。

强大的‘AWEB IDE’还给我们提供了‘预览功能调试’，这个功能适合脑子比较清晰的人用，就是大概也许知道是什么地方有问题导致组件报错的，比如我这种，都想不起来要用，组件一报错就是，哎呀，怎么肥四，哪里又错了，然后就打断点，慢慢调，找到就，呀–>好开心，找不到就那个谁，能不能帮我看下这个是什么鬼！！！

这种调试的方法大概就是：

首先打开调试工具，上图：

然后，请看图：

最后在控制台输入‘auiCtx.variables.’相应的key可以调用位于该页面模型下所有组件的接口。看图：

其实这个也很方便，但是就是不一定非得在‘AWEB IDE’里面调试，‘Chrome’里面也可以的，就不用去打开‘IDE’的预览功能了。

调试完要记得修改IDE里面组件的JS文件，然后保存就行。

以上方法在控制台打开的JS文件，修改后都需要按‘Ctrl + S’保存一下，然后才可以在浏览器看到效果，修改完毕之后，需要‘Ctrl + A’–>‘Ctrl + C’,将在控制台修改好的JS文件复制到需要修改的组件的JS文件中，然后保存一下即可。（快捷键‘shift + r’貌似可以直接将修改的内容实时保存到本地，不过我还没有尝试过这个方法，快捷键有时候会没有，所以，还是为了保险起见，直接粘贴复制吧，哈哈）。

基本上就这么多，详情请拨打95817咨询了解，谢谢！

地址：http://192.9.200.223:8081/symphony/article/1550629640682?r=Helen(http://)