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 ...
随机推荐
- python学习 条件控制
if - else if 条件a : 内容a else : 内容 非a if - elif - else if 条件a : 内容a elif 条件b: 内容b-a else : 内容 非(a∪b) ...
- wordpress 后台页面无法显示绑定的台湾语言
问题:当前切换到的语言是English,然后在页面的列表中,分别显示的语言有中文和香港,没有出现台湾的图标,如上图所示 原因:在polylang插件的设置里面,可以看到台湾语言的 Language c ...
- c# 引用类型对象的深拷贝
c#中的对象大体分为值类型和引用类型,值类型大致包括 int, struct等,引用类型大致包括 自定义Class,object 等.string属于特殊的引用类型,不在本文的讨论之内. 值类型直接存 ...
- Mathematica多元隐函数作图
例: ContourPlot3D[ 1/x + 1/y + 1/z == 1/10, {x, 最小值, 最大值}, {y, 最小值, 最大值}, {z, 最小值, 最大值}]
- docker volumes?
我发现我无法mount东西出来.都是会被host的覆盖掉的.,
- (转)MySQL open_files_limit相关设置
http://www.cnblogs.com/zhoujinyi/archive/2013/01/31/2883433.html---------------------------MySQL ope ...
- jQuery插件的开发(一)
jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法.jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级 ...
- 100行代码搞定抖音短视频App,终于可以和美女合唱了。
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由视频咖 发表于云+社区专栏 本文作者,shengcui,腾讯云高级开发工程师,负责移动客户端开发 最近抖音最近又带了一波合唱的节奏,老 ...
- SpringMVC入门(一)
非注解的SpringMVC 1.创建一个web工程 2.导入工程需要的jar包 3.配置SpringMVC的前端控制器 前端控制器(DispatcherAdapter)需要在web.xml文件中进行 ...
- 【c++】类管理指针成员
c++编程提倡使用标准库,一个原因是标准库大胆减少对指针的使用.但是许多程序是离不开指针的.包含指针的类需要特别注意复制控制,原因是复制指针时只复制指针中的地址,而不复制指针所指向的对象.这样当把一个 ...