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 ...
随机推荐
- 解决视图状态消息验证代码 (MAC) 错误
https://blog.csdn.net/bingtingabc/article/details/49148745 2015年10月15日 10:05:56 bingtingabc 阅读数:3397 ...
- DB link的迁移
我们在做某些Schema的迁移的时候,由于用到Public的db link,然而由于不知道db link中目标端账号的密码,因此无法在新环境重新创建DB link. 本次实验的思路是将视图dba_db ...
- Axure原型设计介绍
在第八周的课堂上,王文娟老师在校园系统上发布了对于自行选择的原型设计软件进行资料查找以及自学的任务.因为之前的课程学习需要,我们大概掌握了原型设计软件Axure的使用,下面是一些我们学习过程中的介绍 ...
- 使用WinSCP进行简单代码文件同步
前言传输协议FTPFTPSSFTPSCP为什么使用WinSCP?CMD的FTP命令FileZillaPuTTYrsyncSublime的SFTP插件WinSCPWinSCP进行简单代码文件同步总结备注 ...
- Java学习之路(一):日常第一课,认识JAVA
Java的介绍 语言的起源 Java是SUN(Stanford University Network 斯坦福大学网络公司) 1995年推出的一门高级编程语言. Java名称的来源: Java最初是被命 ...
- 远控项目(Windows Socket)
实现内容(屏幕,鼠标,键盘实时控制) 控制端: #pragma once #ifndef keybd_H #define keybd_H #include <stdio.h> #inclu ...
- DBUtils工具类的使用
DBUtils工具类1.DBUtils工具类,由apache组织提供的工具类,对JDBC做了一些简单封装. 做了查询的封装,把查询的结果封装到List集合 Map集合 JavaBean对象中 做了增删 ...
- React.js 小书 Lesson19 - 挂载阶段的组件生命周期(二)
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson19 转载请注明出处,保留原文链接和作者信息. 这一节我们来讨论一下对于一个组件来说,cons ...
- php中array_walk() 和 array_map()两个函数区别
两个函数的共性和区别: 1.传入这两个函数的 $value,就是数组中的单一个元素. 2.array_walk() 仅返回true或者false,array_map() 返回处理后的数组: 3.要得到 ...
- 让div铺满整个空间
需要用到几个css属性: .content{ width:100%;position: absolute;top: 50px;bottom: 0px;left: } 设置了bottom.top及abs ...