如何使用Chrome直接编辑前端代码

这篇具有很好参考价值的文章主要介绍了如何使用Chrome直接编辑前端代码。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

写在前面

虽然是后端开发,但是不可避免的有时候需要写一些前端代码,所以一些前端技能还是有必要掌握的。我们知道修改代码之后看到效果最直接的方式就是直接在浏览器修改,但是常规的方式,在页面刷新之后我们所做的修改就会丢掉了,很不利于我们调试,此时就可以使用chrome的Override的功能,接下来看下如何操作。

1:具体操作

首先我们F12打开chrome的控制台,然后点击到source中,如下图:

直接修改网页源码并执行,杂,chrome,前端,javascript

然后我们创建一个本地文件夹,比如我本地的D:\for-chrome,然后选择Source->Overrides,如下图:

直接修改网页源码并执行,杂,chrome,前端,javascript

然后点击Select folders for override,并选择我们新建的D:\for-chrome,如下:

直接修改网页源码并执行,杂,chrome,前端,javascript

选择后如下图:

直接修改网页源码并执行,杂,chrome,前端,javascript

接下来我们就可以开始操作了,比如修改页面https://www.jianshu.com/p/68485d5c7fb9 的一句话被以下专题收入,发现更多相似内容,操作page->右键->Search in all files:

直接修改网页源码并执行,杂,chrome,前端,javascript

然后搜索被以下专题收入,发现更多相似内容

直接修改网页源码并执行,杂,chrome,前端,javascript

然后点击就可以打开页面在的位置:

直接修改网页源码并执行,杂,chrome,前端,javascript

然后我们就可以在该文件中找到这句话,并修改:

直接修改网页源码并执行,杂,chrome,前端,javascript

红框中就是我们增加的内容,然后点击Ctrl+S,如果出现如下图标,就说明我们已经成功将文件保存到本地了:

直接修改网页源码并执行,杂,chrome,前端,javascript

直接修改网页源码并执行,杂,chrome,前端,javascript

直接修改网页源码并执行,杂,chrome,前端,javascript

我们刷新页面来看效果:

直接修改网页源码并执行,杂,chrome,前端,javascript

到这里,我们就配置成功了,这里演示的是编辑html,css,js也是可以编辑的,大家可以自己试一下。文章来源地址https://www.toymoban.com/news/detail-569673.html

2:可能的问题

1:找到的页面不能编辑,可能是选中`Enable Local Override`后没有重新刷新页面,重新刷新即可。
2:changes to this file were not saved,确定配置正确,也选择了`Enable Local Override`,就应该是谷歌抽风,重启再试试,还不行的话,就将选择的workspace删除,重新选择新的文件夹

写在后面

到了这里,关于如何使用Chrome直接编辑前端代码的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端同学必备:教你如何安装、使用Chrome的vue-devtools插件

    Vue-devtools是一个Chrome浏览器插件,它是一个浏览器调试工具,用于开发Vue.js应用程序。它可以用于Vue.js应用程序的调试,可以更好地了解应用程序的结构和状态,以及帮助快速修复代码错误。 Vue-devtools插件的作用和优势如下: 1. 调试Vue.js应用程序:Vue-devtools是一个强大的调

    2024年04月25日
    浏览(41)
  • 【方法】如何把Excel“只读方式”变成可直接编辑?

    Excel在“只读方式”下,编辑后是无法直接保存原文件的,那如何可以直接编辑原文件呢?下面来一起看看看吧。 如果Excel设置的是无密码的“只读方式”,那在打开Excel后,会出现对话框,提示“是否以只读方式打开”,如果想直接编辑文件,选择“否”就可以了。 这样,

    2024年01月24日
    浏览(106)
  • 前端编辑页面修改后和原始数据比较差异

    在软件研发过程中,会遇到很多编辑页面,有时编辑页面和新增页面长的基本上一样,甚至就是一套页面供新增和编辑共用。编辑页面的场景比较多,例如: 场景一、字段比较多,但实际只修改了几个字段,如果把所有字段都回传给后端,冗余字段(未作变更的字段)修改就

    2024年02月11日
    浏览(41)
  • UE5.1编辑器拓展【二、脚本化资产行为,快速更改资产名字,1.直接添加前缀或后缀2.通过资产类判断添加修改前缀】

    目录 了解相关的函数 第一种做法:自定义添加选择资产的前缀或后缀 代码 效果 第二种做法:通过映射来获取资产类型添加前缀和修改前缀 映射代码 代码 效果 在之前一章中,我们创建了插件,用来扩展编辑器的使用: UE5.1编辑器拓展【一、脚本化资产行为,通知,弹窗,

    2024年02月07日
    浏览(46)
  • 修改unity代码编辑器

    将   Unity  自带的 MonoDevelop  替换成微软的 VS  2017 编辑器。 操作步骤 : 第一步:选择Edit选项卡下的Preferences..选项 第二步:选择External Tools 第三步:修改右侧的External Script Editor,选择VS2017  有的小伙伴可能下拉框中没有VS2017选项,没关系,点击Brower..,找到VS2017的应用程序

    2024年02月11日
    浏览(45)
  • 前端界面直接生成源码?用这个工具直接生成VUE代码,简单易用

    推荐一个前端代码生成工具iVX。我个人使用这个工具也有一段时间了,感觉做的很不错。有需要生成前端代码的同学可以关注了解一下,在下面的这个例子中,我生成了两个编辑框和两个按钮。 上手一个工具的最便捷路径就是看它的官方文档和教程。同样,iVX官网也提供了这

    2024年02月05日
    浏览(46)
  • 华为交换机如何配置Web网管登录?直接用网页管理交换机

    Web网管是一种对交换机的管理方式,它利用交换机内置的Web服务器,为用户提供图形化的操作界面。用户可以从终端通过HTTPS登录到Web网管,对交换机进行管理和维护,同时也非常方便。 1、配置管理IP地址,便于后续通过Web网管登录交换机。 2、加载Web网页文件。 3、配置We

    2024年03月24日
    浏览(62)
  • 在线WebOffce在HTML/VUE/Electron纯前端网页编辑Office之打开Word后自动处于修订模式

    在线办公协同办公过程中,对于老板给出的文档修改,如果在错别字方面都要自己一个个字去看的话也太浪费时间了,其实word上就有一个修订模式,可以帮助大家高效完成文档的修改,在线WebOffce在HTML/VUE/Electron纯前端网页编辑Office之打开Word后自动处于修订模式? 第一步:下

    2024年01月21日
    浏览(51)
  • 【免费】多种方法手把手教你如何将自己做的网页做成网络链接(直接访问)

    目录 前言 ​一、github(最常用的)  二、七牛云(推荐小白使用,简单粗暴)  三、NATAPP 四、codepen(建议学网页的人群使用) 彩蛋 http://t.csdn.cn/VaiP1我之前发的爱心代码,有许多兄弟都问我,怎么把自己的网页做成链接,都2022年了,我不允许还有人不会做属于自己的网站

    2024年02月03日
    浏览(57)
  • AI从截图直接生成代码、前端程序员的福音

    简介 项目可以将任何屏幕截图或设计转换为干净的代码(支持大多数框架)。来自领先公司的开发人员和设计师使用的排名第一的工具。完全开源,在 GitHub 上拥有超过 35,000 颗星。非常受欢迎。 各位小伙伴们感觉有帮助的,可以收藏一下,方便下次找到项目! 项目地址:

    2024年04月13日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包