如何利用Chrome的控制台更改网页里面的Javascript代码并使得修改能够生效?

JavaScript015

如何利用Chrome的控制台更改网页里面的Javascript代码并使得修改能够生效?,第1张

js代码在页面渲染的时候已经执行了,就是说从请求一个页面到完整看到一个页面之后,这个页面相关的js代码已经执行完毕,下次执行的时候依然是页面再次刷新加载的时候。\x0d\x0af12修改代码刷新后还是会变回原来的代码,再次执行的还是原来的代码。\x0d\x0a对于已经执行过的且已知在页面中不会再次执行的的代码,直接在debugger里修改是没有用的,即使保存了,但是只要一刷新页面,JS的代码内容是会重新从cache获取或者重新向服务器请求然后执行的,但是这不代表就是不能修改。\x0d\x0a比如对于那些通过事件触发的代码,当修改并保存以后,是会生效的,前提是第一没有刷新页面,第二可以在不刷新页面的前提下执行这段修改过的代码(比如绑定事件)。

网页中大部分的限制都是由js编写的,而chrome提供了一个修改js代码的工具,利用这个工具可以轻松解决各种时间等待之类的限制。本文主要通过利用chrome命令行修改变量值得方式,控制运行流程。

我们看到该网站有一个阅读等待时间,而且一直没有任何变化,我们的目的是跳过这个等待时间。步骤如下:

1、按F12,打开调试面板;

2、打开source面板,找到相对应的代码;

3、分析代码,我们发现,124行元素 name="Candidateposition1$BtnOk" ,名字和后面的139、140行元素的名字 document.getElementById("CandidatePosition1_BtnOk").disabled=false不相同,在运行到139、140行get元素的时候,是空,所以该行运行后就有个红叉,因为没有get到这个元素,说明这是网站设计时候的一个BUG。那么我们来人工地让这个元素的disabled属性变成false即可;

3、如图选择console面板,这里可以用来说如一些即时的js代码,我们输入 document.getElementById("Candidateposition1_BtnOk").disabled=false请注意,这个地方的 $ 符号应该用下划线,因为实际过程中发现元素的编号并不和开始一致,遇到这种情况,点开Elements面板查看到当前按钮就可以。至此我们发现这个按钮可以点击了。

在Google Chrome浏览器中,按F12进入的是本地调试界面。在F12调试界面中修改的JS代码,是修改的“本地缓存文件”中的代码,而不是存在于服务器上的网页的真正代码,网页的真正代码在浏览器中是无法修改的。Chrome开发者调试工具(F12),可以在调试界面修改代码(包括JS、HTML和CSS)模拟本地运行,具体步骤大致如下:在需要修改的代码段上方合理代码行设置断点;按F5键刷新网页,并等待网页执行到断点;修改JS代码或其它需要修改的代码,修改后选择单步执行或继续执行即可。通常,调试中修改无效,是因为网页加载完成,其实就是运行已经完成了,修改代码不会再次执行。