Java Web项目 JavaScript debug调试方法

背景

诸如IDEA和Eclipse等IDE都可以debug调试Java代码,那么问题来了,页面的JavaScript如何调试呢。在实际开发工作中,我们肯定需要来debug JavaScript代码,直接在IDE(我这里用的是IDEA)的JavaScript代码打断点是没有效果的,那要怎么debug呢,这时候就需要Google chorme浏览器的debuger了(火狐浏览器也可以,当然是其中一种方法,不知道还有没有其他方法,有更好的方法的话,麻烦告诉下)。好了,下面就记录下怎么使用 Google 浏览器的JavaScript debug功能。

设置断点及使用

1)打开浏览器的开发者工具,如下图:或者直接按F12键可以直接打开
Java Web项目 JavaScript debug调试方法_第1张图片

2)点击“Sources” —》选择你要debug的JavaScript文件,鼠标左键点击图片3的区域设置/取消断点;

Java Web项目 JavaScript debug调试方法_第2张图片

3)debuger工具栏:

Java Web项目 JavaScript debug调试方法_第3张图片
工具栏:
工具栏

(1) 跳到下一断点,快捷键F8
在这里插入图片描述Java Web项目 JavaScript debug调试方法_第4张图片
(2)下一步: F10
在这里插入图片描述
Java Web项目 JavaScript debug调试方法_第5张图片
(3) F11
在这里插入图片描述
(4) Shift+F11
在这里插入图片描述

你可能感兴趣的:(前端技术)