在现代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. 4.nginx动静分离

    动静分离,就是将css.js.jpg等静态资源和jsp等动态资源分开处理,以此提高服务器响应速度,提高性能. 核心就是区分动态和静态资源 图片转自:https://www.cnblogs.com/xi ...

  2. 股神 C++

    题目描述 有股神吗? 有,小赛就是! 经过严密的计算,小赛买了一支股票,他知道从他买股票的那天开始,股票会有以下变化:第一天不变,以后涨一天,跌一天,涨两天,跌一天,涨三天,跌一天...依此类推. 为 ...

  3. (转)Linux:使用libgen.h:basename,dirname

    Linux:使用libgen.h:basename,dirname basename以及dirname是两个命令: [test1280@localhost ~]$ which basename /bi ...

  4. 微信公众号中的支付宝支付与微信支付 && 支付宝支付问题(微信bug)

    一般,在微信公众号中的商城都是需要支持微信支付和支付宝支付的,当然,较大的公司对于鹅厂和阿里的站队就不说了,所以这里简单记录一下支付宝支付和微信支付的主要流程.说是简单介绍,这是因为确实不难,因为前端 ...

  5. Kafka 0.9 新特性

    Kafka发布0.9了,这一重磅消息,让小伙伴们激动不已,来看看这个版本有哪些值得关注的地方吧! 一.安全特性 在0.9之前,Kafka安全方面的考虑几乎为0,在进行外网传输时,只好通过Linux的防 ...

  6. lua热重载

    热重载,就是不重新开unity让代码的变化直接看出来,一般在开发时候使用 lua中通过require导入的文件,最终都存在package.loaded这个table中.require会判断是否文件已经 ...

  7. Java String StringBuilder StringBuffer

    String是字符串常量 StringBuilder和StringBuffer都是字符串变量 速度方面:StringBuilder > StringBuffer > String 每当用S ...

  8. 【转】C#中的委托,匿名方法和Lambda表达式

    简介 在.NET中,委托,匿名方法和Lambda表达式很容易发生混淆.我想下面的代码能证实这点.下面哪一个First会被编译?哪一个会返回我们需要的结果?即Customer.ID=5.答案是6个Fir ...

  9. [android] 实现返回键操作思路

    记录用户点击的操作历史,使用栈数据结构,频繁的操作栈顶(添加,获取,删除),使用LinkedList 捕获用户的返回键操作,响应返回键,返回上一个界面 MainActivity.java /** * ...

  10. 宏定义中的反斜杠"\"和宏定义的细节说明

    转载自:http://www.wtoutiao.com/p/K6csca.html 在阅读C语言代码经常可以看到代码中出现反斜杠"\",不是很明白它的意思,遂对反斜杠"\ ...