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

2023-04-25 23:58:02JavaScript022

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

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

functionn MyAutoRun(){//以下是您的函数的代码，请自行修改先！\x0d\x0aalert("函数自动执行哦！")} 下面，我们就针对上面的函数，让其在网页载入的时候自动运行！ ①第一种方法将如上代码改为： \x0d\x0afunctionn MyAutoRun(){//以下是您的函数的代码，请自行修改先！\x0d\x0aalert("函数自动执行哦！")}window.onload=MyAutoRun//仅需要加这一句\x0d\x0a ②第二种方法修改网页的Body为：或者改为： ③第三种方法使用JS定时器来间断性的执行函数： setTimeout("MyAutoRun()",1000)//隔1000毫秒就执行一次MyAutoRun()函数实现方法，将最上面的那JS函数，改为： \x0d\x0afunctionn MyAutoRun(){//以下是您的函数的代码，请自行修改先！\x0d\x0aalert("函数自动执行哦！")}setTimeout("MyAutoRun()",1000)//这样就行拉\x0d\x0a 其它的方法比较特殊，也不常用，通用性也不大，偶就不介绍了，拜拜！

1、浏览器控制台运行

JavaScript不同于java语言或者c语言，需要环境、需要编译再运行，js在被制造出来时，就是为浏览器而生，可以直接在浏览器里运行，这里以谷歌浏览器为例，鼠标右键检查或者快捷键F12即可看到控制台可以理解为操作系统里的命令行模式

在这里就可以直接输入我们想输入的js代码，回车即可查看代码执行结果

在浏览器输入js代码的好处显而易见：方便，打开浏览器就能输代码查看执行结果，我平常也多用浏览器控制台学学原生js的原理或者看看正则是不是匹配，因为浏览器控制台的缺点太多了：操作不便，没法文件操作只能命令行，找错困难，大多数时候的js是有依赖的，控制台不方便整依赖，所以，一般控制台也就执行执行简单原生的js

2、写在HTML里运行

实际上，我们肯定不想用命令行的方式，当然是用一个顺手的IDE写代码。

这种方式，就是我大学时候，老师们教的传统方式了。

学HTML的时候，会教到标签，有一个标签不同于别的花里胡哨的标签，这个标签很牛，叫做<script>脚本标签，用来嵌入或者引用可执行脚本，这里解释一下嵌入和引用。嵌入呢，就是把脚本写在标签里边儿，引用呢，就是把脚本写好，然后用标签引入这个脚本的路径

这是主流的写法也是主流的教法，嵌入的写法就是这样：

引用的写法是这样：

查看执行结果的话，点击IDE边上的浏览器图标或者右键run这个html页面，等浏览器弹出来，右键检查就能看到控制台输出的值了

3、直接运行js

实际上上面第二种方法已经很靠谱很普及了，可还是用起来不舒服，每回都要写一个HTML，有的甚至还要再写一个js，那能不能像运行html一样，直接右键运行js呢？

当然是可以的！用node！以下是我花了一个小时才整成的历程！

1、由于我是新的电脑，我装了个nodejs，安装包安装完后，直接命令行执行node命令，即可以直接运行js代码

这样方式还是很蠢，和浏览器没什么区别