如何使用浏览器开发者模式进行调试,菜鸟心得

来源:互联网 发布:淘宝卖家包邮怎么设置 编辑:程序博客网 时间:2024/05/29 03:07

本人刚进入社会工作2个月,之前虽然有做过一点web 开发但是没怎么去学习过,16届的辣鸡就是形容我这种人了,但是现在开始工作了,有些东西不得不学也有时间学了,之前把时间都花在打游戏上面了。
下面开始进入正题,用浏览器开发者模式进行调试,打开方法,ie 使用的是快捷键f12 ,当然也可以去工具菜单里面找,其他浏览器自己看看菜单栏找下开发者工具就可以找到了。
开发者模式可以做什么?
1.可以用来调试 html ,css 样式。
css 可以在这里进行属性的增删查改然后等效果符合自己的预期目标时再将改动的代码写回原文件,在开发者这里改动样式是不会影响原文件的,所以我们可以大胆去做。
下图是样式调试
2 可以在网络选项开启捕捉请求。

(2)当我们接触公司比较大型的项目,利用网络请求可以方便理清代码的流程,假如项目用的是经典的ssh 模式的话,运行项目后你可以查看url 后缀为action 的请求再看他响应的正文可以找到 对应的jsp 正文,这可以跟你直接研究代码相结合起来快速懂得代码的大致思路。
这里写图片描述

3 可以用来为脚本设置断点 进行跟踪。
断点调试主要是对你想研究的某块代码进行设断点,然后利用 运行一行(如果有函数进入函数),运行一行(如果有函数执行完函数) ,跳出函数 3种方法,或者直接运行到下个断点,没有断点就运行到最后,慢慢跟踪代码的运行,将你想关注的变量的值添加到监视或者直接 查看(比较新的浏览器鼠标移到变量如果该变量已经有值会显示出来),这样可以跟你预估的值进行比较或者知道代码是不是没运行到某个本来要运行到的函数,可以帮助你快速找到问题发生的地方。
这里写图片描述
在这里要吐槽一下页面错误有时候总是执行到库文件里出错,我自己有时也会被搞晕,只能狂按跳出函数,最后只能结束调试。重新再调一次。

关于缓存,一般用ide 开发然后部署到web 服务器上面如果只是改动js 文件,是不需要重启tomcat ,毕竟太耗时间,不过记得清掉ie 的缓存,然后刷新页面就可以了,如果改动了java 文件只是改动变量的值的话也是不需要重启,因为这样java 文件不用重新编译,如果有需要重新编译的文件那么只能重启tomcat。

这里写图片描述
另外,搜索关键字是很重要的技能,工作时代码自己要学会搜索关键字对应的文件,在当前文件搜索内容,在当前项目,当前包搜索文件或者代码内容,工作必备技能啊。

这些是目前这阵子的收获之一,自己研究还是很耗时间的,所以跟大家分享一下,中国的代码届分享意识太差了,为此我花了一个半小时写了这篇文章,鼠标今天还有点作死,截个图总是拖着拖着就断了,写得我快成为发狂的绿巨人了,慢慢积累吧。

2 0
原创粉丝点击