java使用DeBug以及开发者工具 快速定位系统的bug
(使用的是谷歌浏览器)
俗话说:“工欲善其事,必先利其器。”,作为一个程序员在做自己的系统的时候难免会遇到各种各样的BUG。是自己的系统还好说,我们自己可以快速的实现定位,找到问题所在,但是如果是前任程序员留下的半成品程序,然后需要你去修补其系统上的漏洞的话,如果没有相应的方法那样不仅仅让你焦头烂额而且会让你变得恐惧。现在就让我来说说怎么会合理的利用相关的工具然后实现错误的快速定位。
我们先从前端来说,
当系统出现错误的时候,我们需要知道它的错误原因,应该怎么做呢,首先我们要找到错误所在的文件的位置。
应该怎么操作呢?
第一步 把鼠标悬浮在页面上
第二步 右击点击查看框架源码然后就会看到如下页面
可以看到浏览器栏上的网址
如下:
第三步:这个就是出错页面所在的位置,然后可以到IDE里面查找该文件了,我使用的是eclipse
使用ctrl+shift +R可以实现文件的查找
然后就可以点击打开该文件了
进入文件可以看到相关的本页面的相关的操作JS
第四步:通过上述的方法找到相应的JS文件,然后可以看到相关的操作
通常情况下程序员都会给自己写的方法添加一个注释,根据操作选个关键词去搜索一下,一般情况就可以找到相关的方法:eclipse ctrl+f搜索,当然这种方法需要碰到一个有良好的代码书写习惯的程序员才会有效。
但是不用怕你可以去搜索事件的关键词来查找:比如:单击事件搜索click,双击事件搜索dblclick ,还有失去焦点事件 获得焦点事件等。
还有一个比较简单有效的方法:通常情况下我们喜欢在相应标签上直接添加一个事件素以可以出错点的标签来找到相应的事件名称,具体可以进行如下操作:
这里有些按钮,现在我想找到红框内按钮的标签。
第一步:按下F12打开开发者工具(也可以在设置工具栏找到开发者工具)
第二步:点击下图红框内的按钮
然后把鼠标移到想要找的位置的上方点击一下就可以找到如下标签:
这个就是我们要找的标签了
然后可以看到:
这个上面有一个点击方法,我们就可以在JS文件里面搜索下这个方法就可以找这个方法了。
当然还会出现一种情况就是事件是动态添加的所以在标签上是看不到的,那么我们应该怎么办呢?我们添加一个事件通常可以通过两个方式实现,第一种就是上面的直接添加,第二种就是通过动态的添加,通过动态的添加的话是通过选择器来定位的,所以当遇到动态添加的事件时候只需要找到标签的ID或者class然后搜索下就可以找到相应的动作。
在第四步可以找到相应的事件,可以开始第五步了
第五步:通过开发者工具进入相关的方法,查看给方法详细的情况。可以通过如下的步骤做到:
我以上面的方法为例:contrast 搜索找到 该方法在
然后我在F12进行如下操作:
调到 sources 点击红圆圈再点击open file 然后搜索 print.js
然后点开找到对应的行数:
在需要的查看的行 单击下如下:
然后在到页面上点击该动作
点击红框按钮
就会进入如上状态 然后按F10一行行的执行也可以安右边蓝色按钮一次执行一个周期:同时可以通过全选的来查看值如下:
也可以在console里面输入相应的值来查看值
这样的话就可以快速定位到JS页面的错误点了。
如果有报错信息的情况就可以直接console里面看到具体哪一行出错,直接点击出错提示就可以进入错误点
直接点击右边提示就可以进入出错点。
这个就差不多是前端的定位的方法,当然开发者工具里面还有些其他比较方便的功能我就不一一说,有兴趣可以找相关的资料。
然后就是后台。
后台定位输出台的信息提示是最重要的一种途径,出错时在输出台里面可以找到大多数的原因,当然还有些不会报错但是页面显示出错的错误。这时候就需要debug了,基本操作和JS定位很相似,不同的是你需要用debug运行程序,
然后知道相应的方法,设置断点,点击操作运行,进入方法里面,F6是一行行运行,F8是进入方法里面(具体的操作的快捷键可以搜索一下)。