sourcemaps and persistent modification in chrome
在现代web开发中,往往我们会借助类似sass,less之类的预处理器来加快开发进度,但是随着项目的增大,你可能无法清楚明确地知道一个css rule到底是从哪个less/scss文件中编译出来的,这反而会大大降低工作效率。
幸运的是google chrome的开发人员借助传统c/c++语言开发经验,使用sourcemap来完成less/scss源程序和最终输出的原生css之间的对应关系,这将大大方便开发人员直接找到对应的less文件进而做修正或者新功能开发。
在这种情况下,我们又会碰到另外一个问题,那就是:虽然上面的场景很好用,但是频繁地在场外编辑器中修改less文件,自动编译注入css,但是你却不能在chrome dev tools中在定位到less文件代码后直接修改,并且触发编译和注入,这个多少也不是很方便。再次很幸运的是google chrome开发人员也想到了这个问题,他们提供了一个非常棒的功能:直接在dev tool source table中修改代码,并且永久保存!!!
这个只需要在source table中右键先add一个local folder到文件系统,随后再map一个个文件(建立sourcemap中的less文件到local folder的映射关系),完成这个工作后,一切工作皆可以在chrome dev tool中完成~,是不是很棒?
https://developer.chrome.com/devtools/docs/workspaces
http://pmuellr.blogspot.co.id/2013/10/sourcemap-best-practices.html
本人在vuejs开发app时使用 chrome 56.0.2924.87版本能够自动识别javascript sourcemap用起来很棒棒,出现错误就直接在console中列出文件+line number,一点击就可以到对应代码位置,效率非常高
https://www.dannycroft.co.uk/enabling-source-maps-in-chrome/
http://blog.teamtreehouse.com/introduction-source-maps
sourcemaps and persistent modification in chrome的更多相关文章
- vue-devtools在google浏览器下安装扩展
下载vue-devtools,地址: https://github.com/vuejs/vue-devtools 解压到对应目录,eg: D:\ProgramFiles\vue-devtools-de ...
- 详解Google Chrome浏览器(操作篇)(一)
开篇概述 在上篇博客中详解Google Chrome浏览器(理论篇)一文中,主要讲解了Chrome 搜索引擎使用.Chrome安装和基本操作.Chrome 基本架构.多线程等原理性问题,这篇将重点讲解 ...
- 浅谈Google Chrome浏览器(操作篇)(上)
开篇概述 在上篇博客中详解Google Chrome浏览器(理论篇)一文中,主要讲解了Chrome 搜索引擎使用.Chrome安装和基本操作.Chrome 基本架构.多线程等原理性问题,这篇将重点讲解 ...
- 详解Google Chrome浏览器(操作篇)(上)
开篇概述 在上篇博客中详解Google Chrome浏览器(理论篇)一文中,主要讲解了Chrome 搜索引擎使用.Chrome安装和基本操作.Chrome 基本架构.多线程等原理性问题,这篇将重点讲解 ...
- Chrome浏览器Cookie解密
做过 web 开发的都知道:浏览器会把重要的认证登录认证信息存放到 cookie 中,在 cookie 有效期内,再次访问这个网站的时候就可以直接从 cookie 中获取到登录信息,这样就可以实现自动 ...
- Chrome DevTools – 键盘和UI快捷键参考
Chrome DevTools有几个内置的快捷键,可以节省你的日常工作的时间. 本指南提供了Chrome DevTools中每个快捷键的快速参考.虽然一些快捷方式在全局范围内可用,但其他的快捷方式用于 ...
- Chrome Extension 检查视图(无效)处理方法
最近闲来无事,简单看了下Chrome扩展的开发,并且开发一个小小的翻译插件(TranslateBao)作为练手,开发细节不详述了,如果有新学习chrome extension开发的新人,可以参考源码, ...
- VS Code - Debugger for Chrome调试JavaScript的两种方式
VS Code - Debugger for Chrome调试JavaScript的两种方式 最近由于出差的缘故,博客写的不是很多,一直想写一篇VS Code - Debugger for Chrom ...
- [No000080]右键解锁增强Chrome插件开发,破除防复制
昨天用360极速(虽然我不喜欢360.)浏览器,登陆知乎查阅一些东西,突然感觉有些观点很赞同,想copy转载一下,我了个去,它丫的居然不让我复制. 地址:https://www.zhihu.com/q ...
随机推荐
- 4.nginx动静分离
动静分离,就是将css.js.jpg等静态资源和jsp等动态资源分开处理,以此提高服务器响应速度,提高性能. 核心就是区分动态和静态资源 图片转自:https://www.cnblogs.com/xi ...
- 股神 C++
题目描述 有股神吗? 有,小赛就是! 经过严密的计算,小赛买了一支股票,他知道从他买股票的那天开始,股票会有以下变化:第一天不变,以后涨一天,跌一天,涨两天,跌一天,涨三天,跌一天...依此类推. 为 ...
- (转)Linux:使用libgen.h:basename,dirname
Linux:使用libgen.h:basename,dirname basename以及dirname是两个命令: [test1280@localhost ~]$ which basename /bi ...
- 微信公众号中的支付宝支付与微信支付 && 支付宝支付问题(微信bug)
一般,在微信公众号中的商城都是需要支持微信支付和支付宝支付的,当然,较大的公司对于鹅厂和阿里的站队就不说了,所以这里简单记录一下支付宝支付和微信支付的主要流程.说是简单介绍,这是因为确实不难,因为前端 ...
- Kafka 0.9 新特性
Kafka发布0.9了,这一重磅消息,让小伙伴们激动不已,来看看这个版本有哪些值得关注的地方吧! 一.安全特性 在0.9之前,Kafka安全方面的考虑几乎为0,在进行外网传输时,只好通过Linux的防 ...
- lua热重载
热重载,就是不重新开unity让代码的变化直接看出来,一般在开发时候使用 lua中通过require导入的文件,最终都存在package.loaded这个table中.require会判断是否文件已经 ...
- Java String StringBuilder StringBuffer
String是字符串常量 StringBuilder和StringBuffer都是字符串变量 速度方面:StringBuilder > StringBuffer > String 每当用S ...
- 【转】C#中的委托,匿名方法和Lambda表达式
简介 在.NET中,委托,匿名方法和Lambda表达式很容易发生混淆.我想下面的代码能证实这点.下面哪一个First会被编译?哪一个会返回我们需要的结果?即Customer.ID=5.答案是6个Fir ...
- [android] 实现返回键操作思路
记录用户点击的操作历史,使用栈数据结构,频繁的操作栈顶(添加,获取,删除),使用LinkedList 捕获用户的返回键操作,响应返回键,返回上一个界面 MainActivity.java /** * ...
- 宏定义中的反斜杠"\"和宏定义的细节说明
转载自:http://www.wtoutiao.com/p/K6csca.html 在阅读C语言代码经常可以看到代码中出现反斜杠"\",不是很明白它的意思,遂对反斜杠"\ ...