在现代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的更多相关文章

  1. vue-devtools在google浏览器下安装扩展

    下载vue-devtools,地址: https://github.com/vuejs/vue-devtools 解压到对应目录,eg: D:\ProgramFiles\vue-devtools-de ...

  2. 详解Google Chrome浏览器(操作篇)(一)

    开篇概述 在上篇博客中详解Google Chrome浏览器(理论篇)一文中,主要讲解了Chrome 搜索引擎使用.Chrome安装和基本操作.Chrome 基本架构.多线程等原理性问题,这篇将重点讲解 ...

  3. 浅谈Google Chrome浏览器(操作篇)(上)

    开篇概述 在上篇博客中详解Google Chrome浏览器(理论篇)一文中,主要讲解了Chrome 搜索引擎使用.Chrome安装和基本操作.Chrome 基本架构.多线程等原理性问题,这篇将重点讲解 ...

  4. 详解Google Chrome浏览器(操作篇)(上)

    开篇概述 在上篇博客中详解Google Chrome浏览器(理论篇)一文中,主要讲解了Chrome 搜索引擎使用.Chrome安装和基本操作.Chrome 基本架构.多线程等原理性问题,这篇将重点讲解 ...

  5. Chrome浏览器Cookie解密

    做过 web 开发的都知道:浏览器会把重要的认证登录认证信息存放到 cookie 中,在 cookie 有效期内,再次访问这个网站的时候就可以直接从 cookie 中获取到登录信息,这样就可以实现自动 ...

  6. Chrome DevTools – 键盘和UI快捷键参考

    Chrome DevTools有几个内置的快捷键,可以节省你的日常工作的时间. 本指南提供了Chrome DevTools中每个快捷键的快速参考.虽然一些快捷方式在全局范围内可用,但其他的快捷方式用于 ...

  7. Chrome Extension 检查视图(无效)处理方法

    最近闲来无事,简单看了下Chrome扩展的开发,并且开发一个小小的翻译插件(TranslateBao)作为练手,开发细节不详述了,如果有新学习chrome extension开发的新人,可以参考源码, ...

  8. VS Code - Debugger for Chrome调试JavaScript的两种方式

    VS Code - Debugger for Chrome调试JavaScript的两种方式 最近由于出差的缘故,博客写的不是很多,一直想写一篇VS Code - Debugger for Chrom ...

  9. [No000080]右键解锁增强Chrome插件开发,破除防复制

    昨天用360极速(虽然我不喜欢360.)浏览器,登陆知乎查阅一些东西,突然感觉有些观点很赞同,想copy转载一下,我了个去,它丫的居然不让我复制. 地址:https://www.zhihu.com/q ...

随机推荐

  1. python学习 条件控制

    if - else  if 条件a : 内容a else : 内容 非a if - elif - else  if 条件a : 内容a elif 条件b: 内容b-a else : 内容 非(a∪b) ...

  2. wordpress 后台页面无法显示绑定的台湾语言

    问题:当前切换到的语言是English,然后在页面的列表中,分别显示的语言有中文和香港,没有出现台湾的图标,如上图所示 原因:在polylang插件的设置里面,可以看到台湾语言的 Language c ...

  3. c# 引用类型对象的深拷贝

    c#中的对象大体分为值类型和引用类型,值类型大致包括 int, struct等,引用类型大致包括 自定义Class,object 等.string属于特殊的引用类型,不在本文的讨论之内. 值类型直接存 ...

  4. Mathematica多元隐函数作图

    例: ContourPlot3D[ 1/x + 1/y + 1/z == 1/10, {x, 最小值, 最大值}, {y, 最小值, 最大值}, {z, 最小值, 最大值}]

  5. docker volumes?

    我发现我无法mount东西出来.都是会被host的覆盖掉的.,

  6. (转)MySQL open_files_limit相关设置

    http://www.cnblogs.com/zhoujinyi/archive/2013/01/31/2883433.html---------------------------MySQL ope ...

  7. jQuery插件的开发(一)

    jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法.jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级 ...

  8. 100行代码搞定抖音短视频App,终于可以和美女合唱了。

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由视频咖 发表于云+社区专栏 本文作者,shengcui,腾讯云高级开发工程师,负责移动客户端开发 最近抖音最近又带了一波合唱的节奏,老 ...

  9. SpringMVC入门(一)

    非注解的SpringMVC 1.创建一个web工程 2.导入工程需要的jar包 3.配置SpringMVC的前端控制器  前端控制器(DispatcherAdapter)需要在web.xml文件中进行 ...

  10. 【c++】类管理指针成员

    c++编程提倡使用标准库,一个原因是标准库大胆减少对指针的使用.但是许多程序是离不开指针的.包含指针的类需要特别注意复制控制,原因是复制指针时只复制指针中的地址,而不复制指针所指向的对象.这样当把一个 ...