怎么才能在浏览器直接改JS代码还能运行？

最新推荐文章于 2024-03-31 14:16:34 发布
最新推荐文章于 2024-03-31 14:16:34 发布
阅读量2.2k 收藏 5
点赞数 1
分类专栏： 前端笔记 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45454550/article/details/133689179
版权

怎么才能在浏览器直接改JS代码还能运行？

场景

前端调试中，JS代码中有一个变量或者判断需要改下看下运行效果；

但是重新需要重新打包或者重新发布怎么办？

有没有办法可以直接在浏览器改呢？还能立即看效果，不行还能接着改。

有吗？有。

直接上操作步骤

首先你要打开F12控制台，找到你要修改的JS文件

像我这样

然后在这个JS的第一行打上断点，注意一定是第一行

在这里插入图片描述

接着重新加载一下页面，会进入断点，这个时候别跳断点，直接找你要改的地方修改代码

在这里插入图片描述

修改完了之后需要保存！别急！CTRL+S 保存！！！一定记得保存！！不然不生效！！
像我这样，保存之后会有一个小黄色三角形

在这里插入图片描述

跳过断点，可以看到走了你新改的代码的，如果还要修改，直接改然后保存就行，不用重新加载了

在这里插入图片描述

END

码字不易，如果对你有帮助，请给个三连吧！

奶粉焦虑
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
chrome修改js数据怎么生效_修改页面js代码/中间人修改js相应
weixin_29001655的博客
01-06 1904
爬虫逆向页面js代码时已经定位到了生成代码，但有一些内容看不懂他的逻辑是什么就萌生了修改页面js代码的想法，但他的js每次刷新页面都会重新加载所以不能本地修改所需工具：mitmproxy、chrome、python3mitmproxy：python的中间人发工具，官方文档，看不懂的看这个：使用 mitmproxy + python 做拦截代理安装配置mitmproxy：mac:brew insta...
network怎么断点调试_前端基础：初步认识Chrome调试面板，学会简单的代码调试，必会！...
weixin_39839968的博客
11-24 1358
在前端开发过程中，我们通过浏览器的页面来查看我们代码编写的成果。然而浏览器的功能非常强大，它不只是能展示我们编写的页面，还能够帮助我们定位开发过程中遇到的问题，提升我们的开发效率。有些时候我们甚至还可以通过浏览器的调试工具来查看一些网站酷炫效果的实现方式。下面我们以Chrome浏览器为例，来介绍一些常用的调试技巧。1. Chrome开发者工具首先我们打开Chrome的开发者工具(又称控制台)，打开...
chrome浏览器F12调式，修改替换js文件
u014644574的博客
12-14 3万+
在F12模式下，有时可以直接修改js源码，Ctrl + S 保存就可以了。但是有时这种方法会不起作用，这里介绍本地替换js的方式。 案例：比如csdn想复制别人的一段文字并保留样式，但是字符长度大于140就不起作用了。 1、通过右键定位需要修改的js文件 当然某些网站，只需要复制文本，直接点下面移除就可以了。 定位js在边栏的位置 2、在本地新建一个js文件，用来存放替换js文件 3、浏览器选择替换文件在本地的存放位置 点击允许访问 4、保存并覆盖 4、格式化...
在浏览器中操作 DOM 元素和执行 JavaScript 代码
最新发布
book_dw5189的博客
03-31 850
在浏览器中，文档对象模型（DOM）是一个以树结构表示 HTML 和 XML 文档的编程接口。它允许程序和脚本动态地访问和更新文档的内容、结构和样式。JavaScript 是一种使得网页可以实现动态交互的编程语言。通过 JavaScript，你可以操作 DOM，从而改变网页的外观和行为。
Chrome浏览器修改js代码
编程小学生
06-16 3101
Chrome修改Js代码
chrome修改js数据怎么生效_在浏览器(chrome)内，直接修改页面上的js代码会生效吗（事件触发类的代码)...
weixin_39919948的博客
12-22 1603
jQuery(function(){jQuery('.select-box button.dh-btn').click(function(){var hoops = this;//alert('会弹出吗');//jQuery('.select-box button.dh-btn').each(function(){if(hoops == this)return;jQuery(this).remov...
浏览器控制台执行代码_chrome浏览器中 F12 功能的简单介绍
weixin_39606799的博客
11-24 5077
首先介绍Chrome开发者工具中，调试时使用最多的三个功能页面是：元素（ELements）、控制台（Console）、源代码（Sources），此外还有网络（Network）等。元素（Elements）：用于查看或修改HTML元素的属性、CSS属性、监听事件、断点等。控制台（Console）：控制台一般用于执行一次性代码，查看JavaScript对象，查看调试日志信息或异常信息。源代码（Sourc...
不使用浏览器运行javascript代码的方法
10-27
用js写一段小程序，但是又觉得使用浏览器去运行挺麻烦的，下面为大家介绍下如何使用java程序调用javascript程序，有类似需求的朋友可以参考下哈，希望对大家有所帮助
520表白+网页代码+可直接浏览器运行+可修改
05-20
明天520了，给各位送上一些表白用的代码，代码都是可以直接使用浏览器打开运行的哦，非常方便，有需要可以进行下载使用，表白保证成功率大大提高。下面为大家展示一下一些代码的效果，里面总共包含17个表白代码，...
python能在浏览器能运行吗
09-16
总的来说，虽然Python无法像JavaScript那样直接在浏览器中原生执行，但通过一些工具和技术，我们可以实现Python代码在浏览器内的模拟运行或通过服务器端与浏览器进行交互。对于学习、演示和简单的交互，这些方法提供...
浏览器运行：在浏览器环境中运行代码的最简单方法
02-04
浏览器运行在浏览器环境中运行代码的最简单方法。 默认情况下捆绑electronjs ！用法$ echo " console.log('Hey from ' + location); window.close() " | browser-runHey from http://localhost:53227/$ 或browser-...
专用网页修改程序代码
08-17
用来修改网页显示不支持的不正常的乱码的等等
前端技巧(一)-----Chrome修改别人网站上的js并执行(仅限未压缩的js)
热门推荐
直到世界的尽头
09-13 6万+
应用场景有时候我们需要对别人的网页 或者 自己已经发布的网页进行 一些js调试。这时候我们是无法修改源代码运行的。但是在Chrome的console中是可以修改运行的。(仅限未压缩的js)步骤F12 在Sources里面找到你的JS文件 这个时候直接在js文件里修改 保存是没有用的，无法生效。需要把需要修改的js复制到Console中修改后直接回车运行即可生效。
渗透学习-学习记录-利用浏览器的开发者工具实时修改网页前端JS代码（实现绕过）
qq_43696276的博客
01-16 6247
最近学习了一些有关于JS脚本搭建网站方面的安全知识。通常来说JS是前端的页面代码，因此我们可以直接修改前端的JS代码来实现绕过，故我试着做了一下利用浏览器的开发者工具进行尝试修改页面，以此来直接进行绕过的实验，特此记录。
chrome控制台修改JS的变量值
qq_40310480的博客
04-29 2万+
这是修改前的,所有流程都是正常走的,if里的也没有打印出来, 然后,我们改改/坏笑/ 先进控制台在判断那块打出断点,然后找到右边的Global,所有的变量都在里面了,找吧 哎,发现了!!! 试试双击改一下 改好之后,继续回到控制台看看"num"现在等于多少,30了,哈哈,继续走断点 最后看一下打印的东西,跳进if里面了! 之前在学校的时候老师教的,当时说学校的评分系统没有后台验证,然后...
在控制台修改js变量的值，模拟异常，方便调试
徐同保的专栏
08-04 1737
如何运行网页html,如何在网页中运行html代码
weixin_36414025的博客
06-23 6958
在做一些网页代码演示的时候，如css样式的演示和js特效演示时都会用到这样的功能 ，记录下使用的方法，有了这个大家就可以在自己的博客中使用了，演示地址：Html代码修改和运行.其中要用到一个js代码function yunxing(obj)//函数名大家可以取{var winname = window.open('', "_blank", '');winname.document.open('te...
js调试工具和方法如何使用,js如何调试代码
神经网络爱好者
10-30 942
大家好，小编来为大家解答以下问题，js调试工具和方法如何使用，js如何调试代码，现在让我们一起来看看吧！大家好，我是。持续组织了8个月，感兴趣的可以参与，每周大家一起学习200行左右的源码，共同进步。同时极力推荐订阅我写的包含20余篇源码文章。。另外：目前建有籍 前端群，可加我微信进群。作为前端开发，我们会经常使用 console.log() 来调试程序中的问题。虽然这种方式也能解决一部分问题，但是它的效率不如能执行逐步调试的工具。
【我不熟悉的javascript】菜鸟必看，大佬绕道～使用控制台写js代码
qq_17335549的博客
12-04 2147
【我不熟悉的javascript】菜鸟必看，大佬绕道～使用控制台写js代码
可以直接在浏览器控制台运行的js生成雪花的代码
03-05
可以尝试以下代码： ``` var canvas = document.createElement('canvas'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; document.body.appendChild(canvas); var ctx = canvas.getContext('2d'); var flakes = []; function Flake() { this.x = Math.random() * canvas.width; this.y = Math.random() * canvas.height; this.radius = Math.random() * 3 + 2; this.speed = Math.random() * 1 + .5; this.opacity = Math.random() * .5 + .5; } Flake.prototype.draw = function() { ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, , Math.PI * 2); ctx.fillStyle = 'rgba(255, 255, 255, ' + this.opacity + ')'; ctx.fill(); }; Flake.prototype.update = function() { this.y += this.speed; if (this.y > canvas.height) { this.y = -this.radius; this.x = Math.random() * canvas.width; } }; for (var i = ; i < 100; i++) { flakes.push(new Flake()); } function animate() { ctx.clearRect(, , canvas.width, canvas.height); for (var i = ; i < flakes.length; i++) { flakes[i].draw(); flakes[i].update(); } requestAnimationFrame(animate); } animate(); ``` 这段代码可以在浏览器控制台中运行，生成雪花效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值