大家都有过用-min.js开发的经历,但这样的脚本调试非常头疼。如果使用为压缩版的,上线前又要去压缩,sourcemap的出现完美解决了这一问题。

即便是chrome提供了格式化代码但阅读压缩后的代码环视很吃力的。

以angularjs为例,谈谈sourcemap的使用。

我的文件夹结构如下:

由于google经常被墙所以建议把angular.js angular.min.js angular.min.js.map都下载到本地。

并且修改angular.min.js中sourcemap的配置,指向本地map文件。

//# sourceMappingURL=angular.min.js.map

html代码如下:

如果开发过程中出现错误,就可以很容易定位到源码位置,找出问题原因。

未使用surcemap

使用sourcemap

目前很多类库都提供了sourcemap的支持。

[javascript]巧用sourcemap快速定位javascript中的问题的更多相关文章

  1. 【转】如何快速定位JVM中消耗CPU最多的线程?

    [转]如何快速定位JVM中消耗CPU最多的线程? https://mp.weixin.qq.com/s?__biz=MzIwMzg1ODcwMw==&mid=2247487802&id ...

  2. 如何快速定位JVM中消耗CPU最多的线程?

    第一步.先找出Java的进程PID ps -ef | grep 进程名关键字 这里假设找到的PID是:12345   第二步.找出该进程内最消耗CPU的线程 top -Hp log4x R :11.7 ...

  3. 如何快速定位JVM中消耗CPU最多的线程? Java 性能调优

    https://mp.weixin.qq.com/s/ZqlhPC06_KW6a9OSgEuIVw 上面的线程栈我们注意到 nid 的值其实就是线程 ID,它是十六进制的,我们将消耗 CPU 最高的线 ...

  4. java editor template Eclipse中的快速Java\JavaScript代码模板使用

    java editor template Eclipse中的快速Java\JavaScript代码模板使用 学习了:http://technicalsearch.iteye.com/blog/2150 ...

  5. javascript 技巧总结积累(正在积累中)

    1.文本框焦点问题 onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后,产生该文件 Onchange:当文字值改变时,产生该事件 Onselect:当文字加亮后,产生该文件 & ...

  6. 快速掌握JavaScript面试基础知识(三)

    译者按: 总结了大量JavaScript基本知识点,很有用! 原文: The Definitive JavaScript Handbook for your next developer interv ...

  7. 快速掌握JavaScript面试基础知识(二)

    译者按: 总结了大量JavaScript基本知识点,很有用! 原文: The Definitive JavaScript Handbook for your next developer interv ...

  8. 怎样才能快速成为JavaScript高手

    如何快速成为JavaScript高手?之前我拿这个问题问过我的同事,也问过国内的一些JavaScript高手. 最近,我一直在拿这个问题问自己.之所以会有这个问题,我基于两个前提:第一.我自认为自己不 ...

  9. 快速了解JavaScript的基础知识

    注释 单行注释: // 单行注释 多行注释: /* 多行 注释 */ 历史上 JavaScript 可以兼容 HTML 注释,因此 <!-- 和 --> 也可以是单行注释. x = 1; ...

随机推荐

  1. 在Windows控制台应用程序中使用CString

    CString是在windows平台下开发中经常使用的字符串类, CString已从MFC中剥离出来了,可以单独使用,只需引用atlstr.h头文件即可. include "stdafx.h ...

  2. html5的常用函数

    required       验证非空 readonly      文本只读 video          视频播放标签 Ogg            带有 Theora 视频编码和 Vorbis 音 ...

  3. PHP下使用Redis消息队列发布微博(复制)

    phpRedisAdmin :github地址  图形化管理界面 git clone https://github.com/ErikDubbelboer/phpRedisAdmin.git cd ph ...

  4. 001-navicat for oracle 12 破解安装

    1.首先软件包和破解文件都需要到我给的百度云盘地址下载,去官网下载的中文版破解不了,至于官网的英文版,我就不清楚了. (1)链接地址. https://pan.baidu.com/s/1jxj4uzg ...

  5. 150. Evaluate Reverse Polish Notation(逆波兰表达式)

    Evaluate the value of an arithmetic expression in Reverse Polish Notation. Valid operators are +, -, ...

  6. iOS 个人所得税 app 基础解析实践

    前言:2019年 新个税实施在即,全国几乎所有在职员工都会下载“个人所得税”app来使用,并且 注册使用过程需要填写身份证号等相当私密重要的个人信息. 至今,各大app平台应用下载榜首仍然“无人能出其 ...

  7. 防止常见XSS 过滤 SQL注入 JAVA过滤器filter

    XSS : 跨站脚本攻击(Cross Site Scripting),为不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆,故将跨站脚本攻击缩写为XSS.恶意攻击者往W ...

  8. Ubuntu16.04桌面版 连接到ftp服务器

    Ftp服务器在不同的网段,需要临时添加网段 不同网段临时添加方法: root@xzrs:/home/rxf# ip addr add 10.1.2.127/24 dev enp0s25 电脑左侧“连接 ...

  9. Linux学习笔记之Xshell配色方案定制

    点击 Xshell 面板顶部的如下按钮. 点击 Browse 按钮,弹出如下面板,选择 ANSI Colors on Black,然后点击右侧save as 按钮,命名为 zkl.   这里其实就是复 ...

  10. GoEasyWeb实时推送

    GoEasyWeb实时推送,轻松实现实时消息推送. Web页面订阅(约5行代码),服务器端推送(2行代码)就可以轻松实现,而且在高并发时消息推送稳定. 自己完全可以只花五分钟写出属于自己的第一个实时推 ...