怎么在chrome调试工具直接修改js代码?

JavaScript07

怎么在chrome调试工具直接修改js代码?,第1张

1、在元素标签上右键审查元素。

2、蓝色部分与红色箭头所指是选中的元素代码。

3、点击箭头所指的部位,打开控制台,如果js 异常会在这里显示相关信息。

4、按照箭头的顺序点击,在代码59行,打上断点。

5、点击箭头所指的位置,刷新页面。

6、js运行到断点的位置会暂停。

7、点击右侧箭头所指的位置,单步执行js代码。

8、鼠标放在变量上,可以查看变量的相关信息。

以谷歌浏览器Chrome为例(火狐类似),说下前端打“断点”:

一、按F12快捷键打开Chrome控制台,点击“Sources”选项卡,如图:

二、刷新当前网页,代码执行到“断点”处会停住,如上图蓝色区域;

三、按F8快捷键可以在不同的断点之间切换、按F10快捷键程序代码会一步步执行,这样就能很方便定位到错误区域,排查错误。

说明:火狐浏览器的操作方法和谷歌类似,当然界面略有不同。

其实很简单的,下面来看看具体的步骤吧:

一、首先打开火狐浏览器

二、找到想要进行调试的网页

三、如果你的火狐浏览器没有安装调试器的话,需要进行安装,就是下面那个蜘蛛图标

四、调试器的安装过程:

五、安装好调试器后,可以直接按F12,就会出现调试的界面

这样就可以了