浏览器更改实现webstrom等前端编辑器的同步更新

  经常写css时是不是浏览器调一下几像素,然后会编辑器改改改,有时候改好几次,真的是累死宝宝了,最近发现了谷歌浏览器的强大功能,更改实现代码同步更新,直接可以浏览器写代码同时实现同步刷新了,而且最重要的不需要借助任何插件,只要有谷歌浏览器就好,下面分享一下实现的步骤。

1.工具准备

  前端编辑器肯定是必须的啦,另外还需安装谷歌浏览器

2.在浏览器打开要同步的项目——F12打开控制台---sources(如下图)

3.接下来的操作就很关键啦sources下找到文件路径--右键add folder...----找到文件本地路径双击---浏览器会提示是否允许添加点允许--回到sources找到任意一个HTML文件------右键map file system....----控制台出现本地html双击选中

4.然后就可以实现功能啦

  不过,有时候你会发现,这样打开后会出现中文或者注释的乱码,解决方法也很简单,把编辑器的编码格式都改成utf-8就可以了,由于每个编辑器的更改方法都不同,就不详细说明了,相信大家也都会!

~~~好东西就是要分享~~~

                                         dan 2017.05.18

时间: 2024-10-11 11:01:24

浏览器更改实现webstrom等前端编辑器的同步更新的相关文章

其他-Web前端编辑器-Brackets

Brackets是一款基于web(html+css+js)开发的web前端编辑器.它有许多普通编辑器难以实现的功能,是web前端开发者的神器. 戳我去下载 其功能如下: 1.快速编辑 将光标定在颜色上,按下快捷键Ctrl+E即可编辑颜色. 将光标定在标签或者class或者id上,Brackets就会搜索整个目录下的css,列出匹配的项,快速编辑样式,再也不用到处找样式啦! 2.快速文档 文档是英文的,快捷键是Ctrl+K,简单测试得出,可以提示css属性的用法 3.多点编辑 选中一串字符,按Ct

做web项目时对代码改动后浏览器端不生效的应对方法(持续更新)

做web项目时,常常会遇到改动了代码,但浏览器端没有生效,原因是多种多样的,我会依据我遇到的情况逐步更新解决的方法 1.执行的时候採用debug模式,普通情况下使用项目部署button右边那个button下的tomcat7中的run即可,假设使用的是serves中的run serves,这样的情况貌似不会自己主动编译 2.点击project菜单下的clean选项,在打开的窗体中选择你使用的项目,ok,这样会删除tomcat容器中关于该项目的一些信息,然后又一次部署,执行 3.删除电脑中tomca

做web项目时对代码修改后浏览器端不生效的应对方法(持续更新)

做web项目时,经常会遇到修改了代码,但浏览器端没有生效,原因是多种多样的,我会根据我遇到的情况逐步更新解决办法 1.运行的时候采用debug模式,一般情况下使用项目部署按钮右边那个按钮下的tomcat7中的run就行,如果使用的是serves中的run serves,这种情况貌似不会自动编译 2.点击project菜单下的clean选项,在打开的窗口中选择你使用的项目,ok,这样会删除tomcat容器中关于该项目的一些信息,然后重新部署,运行 3.删除电脑中tomcat文件夹,重新解压,然后在

表结构更改后或新增加数据后同步到表中

select 'insert into mtx_system_module(module_id,module_code,module_name,module_note,create_date,version)values('+cast(moduleid as varchar(10))+','''+ObjectID+''','''+Name+''','''+isnull(Note,'')+''',NOW(),1);' from AppModules where subsystem=1 and Pa

System.InvalidOperationException: 支持“XXX”上下文的模型已在数据库创建后发生更改。请考虑使用 Code First 迁移更新数据库(http://go.microsoft.com/fwlink/?LinkId=238269)。

System.InvalidOperationException: 支持"XXX"上下文的模型已在数据库创建后发生更改.请考虑使用 Code First 迁移更新数据库(http://go.microsoft.com/fwlink/?LinkId=238269). EF发布时遇到的问题(数据库初始化 http://www.cr173.com/html/17941_1.html) public ZujuanWebSiteDataEntities() : base("cloud_

支持“***Context”上下文的模型已在数据库创建后发生更改。请考虑使用 Code First 迁移更新数据库(http://go.microsoft.com/fwlink/?LinkId=238269)。

在用VS进行MVC开发的过程中遇到如下问题: 支持“***Context”上下文的模型已在数据库创建后发生更改.请考虑使用 Code First 迁移更新数据库(http://go.microsoft.com/fwlink/?LinkId=238269). 解决了,把数据库中检测模型变化的表(如上图所示)删除就可以了

"支持“xxx”上下文的模型已在数据库创建后发生更改。请考虑使用 Code First 迁移更新数据库”解决办法

学习Asp.Net MVC4 时,使用EF.本来正常,但是由于修改了一下Model中的一个实体类. 导致这个错误. “支持“xxx”上下文的模型已在数据库创建后发生更改.请考虑使用 Code First 迁移更新数据库”. 为了解决上述错误,在Global.asax文件中在 Application_Start后添加以下语句: Database.SetInitializer(new DropCreateDatabaseIfModelChanges<SalesERPDAL>()); 注意需引入命名

sublime Text2——轻量级前端编辑器

之前在知乎上搜索好用的前端开发工具,投票最多的是webStrom,试用过后发现果真好用,代码补全,代码检查,支持主流的版本控制,比如git,svn等等.但是毕竟是一款集成的IDE,启动速度慢.吃内存是不争的事实. sublime text2就弥补了这个不足,轻量级,秒速启动,不吃内存.而且有许多给力的插件包,可以根据需要配置成强有力的编辑神器,我主要用他来写html.javascript,下面是具体的配置步骤: 1.下载安装sublime text2 http://www.sublimetext

前端编辑器-自定义html模板

1.webstorm 自定义html模板 我们需要找到设置创建模板的地方,步骤如下: File  ->  settings ->  Editor  ->  File and Code Templates 找到这个位置,我们就会看见这个界面,在导航栏的右侧部分的左上角有个+号我们就可以开始创建模板了, 如上图所示,Name所对应的地方是用来写HTML模板的名字, 这会方便我们选择的是哪一个模板, Extension是我们我们的模板是什么类型的文档,此地理所应当是填html, 空白区域是放h