使用sourceMap文件定位小程序错误信息
sourceMap是什么
在前端开发过程中代码难免会有错误,即便是再小心,也有可能出现 Cannot read property 'xxx' of null
这样的低级失误,debug自然是家常便饭。如何使用chorme的控制台进行debug也有许多技巧,但本文的关注点不在此,不予讨论。
在使用构建工具时,sourceMap相相信大多数人都见过,也知道webpack中的devtool参数可以配置打包生成的sourceMap模式,但是不见得知道如何使用,因为这都是构建工具和浏览器默认自带且默认处理的,多数人不去关注。简单来说,sourceMap就是字面意思,源文件的映射,能够从压缩后的js中找到源文件对应的行列,在定位错误的时候非常有用。
sourceMap怎么用
npm run dev
开始开发vue项目,先写一段简单的vue代码
代码内容很简单,就是挂载组件的时候触发断点
这时候打开浏览器就会进入断点:
再看看我们的源码,能够发现连代码行数位置都是完美还原的,为debug提供了极大的方便(极度舒适.jpg)
但是很明显这样的代码是不能跑在浏览器中的,那浏览器是怎么做到的,查看浏览器下载的js文件 app.js
:
能够发现这一段与我们写下的vue代码基本相同,但是控制台为什么没有显示在这里debugger呢?另外在 app.js
的末尾看到这样一行
//# sourceMappingURL=app.js.map
这行便是向控制台指明了该文件对应的 sourceMap ,在报错或debugger时控制台会使用该sourceMap文件获得源文件及目前光标位置(不知道怎么形容就暂时称之为光标吧,也就是源文件debugger的位置)
打开 app.js.map
,它实际上是一个json文件,我装了json插件才显示成这样,但是很明显这东西我看不懂(摊手)
虽然我看不懂,但并不影响我用它debug,而且一般来说并不需要开发者专门配置什么,这一切都是开箱即用的。
PS:由于示例比较简单且没有压缩转译,即便没有sourceMap也一样能够调试,但是在生产环境线上代码进行压缩和babel转译后会变得非常难以调试,这时候sourceMap便会非常有用。
使用sourceMap定位小程序报错信息
微信小程序后台是自带有错误日志记录的功能,原本用的还好好的,错误信息中会带出源文件的路径,顺着路径和提示信息找即可定位错误。但是在爆出能够轻易获得小程序源码的问题后小程序官方在某个版本中加入了压缩混淆的功能(不开还是原来的样子但是开了安全系数更高),报错信息便不再有源文件的路径了。
但是这样我要怎么调试呢,总不能一个一个replace去找吧,而小程序官方提供了sourceMap文件,从上面的尝试知道sourceMap是可以帮助定位错误信息的,但是具体要怎么使用呢?
我便开启了搜索大法,寻找使用sourceMap的办法,发现只需要使用mozilla提供的source-map库即可,于是简单做了一个能够利用sourceMap和报错行数获得源码位置的页面,效果是这样的
代码在这里,使用html写的,直接复制保存就能使用
总结
sourceMap开箱即用很舒服,只需要在源码后面加一句 //# sourceMappingURL=xxx.map
即可,若是没有源码只有错误信息也可以通过source-map库定位错误。至于sourceMap的具体原理待日后有时间再深入了解(手动狗头)。
参考链接
使用sourceMap文件定位小程序错误信息的更多相关文章
- JWebFileTrans(JDownload): 一款可以从网络上下载文件的小程序(三),多线程断点下载
一 前言 本篇博客是<JWebFileTrans(JDownload):一款可以从网络上下载文件的小程序>系列博客的第三篇,本篇博客的内容主要是在前两篇的基础上增加多线程的功能.简言之,本 ...
- JWebFileTrans(JDownload): 一款可以从网络上下载文件的小程序(二)
一 前言 本文是上一篇博客JWebFileTrans:一款可以从网络上下载文件的小程序(一)的续集.此篇博客主要在上一篇的基础上加入了断点续传的功能,用户在下载中途停止下载后,下次可以读取断点文件, ...
- JDownload: 一款可以从网络上下载文件的小程序第四篇(整体架构描述)
一 前言 时间过得真快,距离本系列博客第一篇的发布已经过去9个月了,本文是该系列的第四篇博客,将对JDownload做一个整体的描述与介绍.恩,先让笔者把记忆拉回到2017年年初,那会笔者在看Unix ...
- 微信小程序错误——mpvue小程序:未找到 app.json 中的定义的 pages "pages/XXX/XXX" 对应的 WXML 文件
背景 在刚开始学习开发小程序时,使用微信开发工具在app.json建立页面,写好配置文件名称后,应该会自动生成页面的4个文件,结果没有生成文件,反而报错:mpvue小程序:未找到 app.json 中 ...
- JWebFileTrans: 一款可以从网络上下载文件的小程序(一)
一 摘要 JWebFileTrans是一款基于socket的网络文件传输小程序,目前支持从HTTP站点下载文件,后续会增加ftp站点下载.断点续传.多线程下载等功能.其代码已开源到github上面,下 ...
- [C#]Windows文件分类器小程序
我平时习惯把各种文件都下载在`下载`文件夹中,时间久了,文件多了,想要找个文件就不那么方便了.于是我就想自己写一个小程序来实现下载文件的自动整理.我想到的文件分类方式是按照文件扩展名分类:把各文件移动 ...
- Fundebug微信小程序错误监控插件更新至1.1.0,新增test()与notifyHttpError()方法
摘要: 1.1.0新增fundebug.test()和fundebug.notifyHttpError()方法,同时大小压缩至15K. Fundebug是专业的小程序BUG监控服务,可以第一时间为您捕 ...
- Python - 文件分发小程序
一.概述 该小程序实现从源端到目标端的文件一键拷贝,源端和目标段都在一台电脑上面,只是目录不同而已 二.参数文件说明 1. settings.txt的说明 a. 通过配置settings.txt,填源 ...
- 微信小程序用户信息解密失败导致的内存泄漏问题。
微信小程序获取用户解密的Session_key 然后对 encryptedData进行解密 偶尔报错 时间长了之后会报内存溢出: java.lang.OutOfMemoryError: GC over ...
随机推荐
- Javascript继承(原始写法,非es6 class)
知识点: Object.create的内部原理: Object.create = function (o) { var F = function () {}; F.prototype ...
- LCIS 最长公共上升子序列问题DP算法及优化
一. 知识简介 学习 LCIS 的预备知识: 动态规划基本思想, LCS, LIS 经典问题:给出有 n 个元素的数组 a[] , m 个元素的数组 b[] ,求出它们的最长上升公共子序列的长度. 例 ...
- Project Euler 26 Reciprocal cycles( 分数循环节 )
题意: 单位分数指分子为1的分数.分母为2至10的单位分数的十进制表示如下所示: 1/2 = 0.5 1/3 = 0.(3) 1/4 = 0.25 1/5 = 0.2 1/6 = 0.1(6 ...
- 使用Ansible安装部署nginx+php+mysql之安装mysql(3)
三.使用Ansible安装mysql 1.mysq.yaml文件 - hosts: clong remote_user: root gather_facts: no tasks: # 安装rpm包 - ...
- Django安装部署
MVC模式说明 Model:是应用程序中用于处理应用程序数据逻辑的部分,通常模型对象负责在数据库中存取数据 View: 是应用程序中处理数据显示的部分,通常视图是依据模型数据创建的 Controlle ...
- C# 实现自定义的USB设备与上位机进行通信(上位机部分)
因为以前没用过USB,对USB也不了解,于是上网查了很多资料,不过网上的资料都是零零散散,不清不楚的,于是我自己总结了一下,下面几个链接是网上这么多零散资料里,我觉得比较有参考意义的. USB设备连接 ...
- 修改struts2自定义标签的源代码,在原有基础上增加功能(用于OA项目权限判断,是否显示某个权限)
OA项目在做权限判断时 原始方式: 现在完成的功能 :通过改变struts2自定标签源代码 在原有的基础上 增加判断权限的功能 而页面上使用标签的方式 还是下图 步骤: 打开文件 搜索< ...
- 驱动中的IO访问
1,内存空间与IO空间 1)I/O 映射方式(I/O-mapped) 典型地,如X86处理器为外设专门实现了一个单独的地址空间,称为"I/O地址空间"或者"I/O端口空间 ...
- Mysql第四天 数据库设计
不考虑主备.集群等方案,基于业务上的设计主要是表结构及表间关系的设计. 而关于表中字段主要是依据业务来进行定义,我们能够指定的大概有这么几项: 存储引擎 一般用InnoDB,特殊需求特殊选用 字符集和 ...
- 刚接触Joomla,写一下瞎折腾的初感受~
我这几天一直在苦苦寻找一款能够长期投靠的CMS产品,要求的是 1)必须支持命名空间 2)必须OOP + MVC分层 3)丰富分文档和使用群体,至少是出名的.免得哪一天他们解散了 4)-- 一開始我把目 ...