今天对chrome调试又进行了系统的学习. Chrome调试工具developer tool技巧 把以前没有使用过的功能列举一遍. 伪类样式调试:伪类样式一般不显示出来,比如像调试元素hover的样式怎么办,看图勾选即可 颜色表示转换:用颜色的名称;以十六进制数;以RGB整数设置颜色;以RGB百分数设置颜色.Shift+click即可切换另一格式. 命令断点调试 使用“debugger;”语句在代码中加入强制断点. 需要断点条件吗?只需将它包装它在IF子句中: if (somethingHapp

如何利用Grunt生成对应的Source Map文件,线上代码压缩使用chrome浏览器便于调式 首先我们来说说为何要生成sourceMap文件呢?简单的说,sourceMap是为了压缩后的代码调式提供方便,比如线上的JS文件已经压缩了,但是线上比如说有bug,但是代码已经是压缩后的,对于开发并不好调式,所以想生存一个对应的Map文件,然后使用chrome浏览器在源文件未压缩的JS文件下调式. 那么Map文件到底是什么呢?简单的来讲它就是记录信息,记录一些为压缩之前的js文件的位置,及压缩后的文

写在前边 有没有这样一种感受,自己写的代码在开发.测试环境跑的稳得一笔,可一到线上就抽风,不是缺这个就是少那个反正就是一顿报错,线上调试代码又很麻烦,让人头疼得很.阿里巴巴出了一款名叫Arthas的工具,可以在线分析诊断Java代码,着实让人眼前一亮. 一.Arthas 是什么? Arthas(阿尔萨斯) 是阿里开源的一个Java在线分析诊断工具 二.Arthas 能解决啥问题? 在日常开发上线过程中,我们多多少少都会遇到下边这些问题,苦于无法在线调试,只能通过老鸟的经验来硬分析bug,效率上不

今天想测试下线上代码,能否正常的执行未登录的拦截.所以把拦截器的代码给开放出来,但是没想到线上代码addInerceptors(InterceptorRegistry registry) 这个方法一直不被执行. @EnableWebMvc @Configuration @Slf4j public class WebConfig implements WebMvcConfigurer { @Bean public UnLoginInterceptor unLoginInterceptor(){ r

前言 之前调试前端bug都是在开发环境中做完并多次测试没有问题之后发布测试环境,验收合格之后发布生产.但生产环境偏偏会有和开发和测试环境不一致的情况,例如测试环境需要加密,而开发环境先不加密,测试环境传给我们的时间格式和生产环境时间格式不一致,数组对象不一致等导致线上生产报错的bug. 为了更好的在线上环境检测到具体的bug,节省我们在本地把地址改为生产的地址并走多一遍流程测试的麻烦,Chrome浏览器dbug测试就显得尤为重要了. 一.定位js代码并标记dbug 首先F12打开控制台,然后选择

有时代码上线了,突然就碰到了坑爹的错误.或者有时看别人家线上的代码,对于一个文件想 fork 下来试试效果又不想把全部文件拉到本地,都可以使用 fiddler 的线上调试功能. 比方说我们打开携程的首页 www.ctrip.com,看到个叫 allsearch.js 的 js 文件,想往里加点代码调试下. 我们先把这个 js 文件下载到本地. 然后打开 fiddler(当然首先得下载安装 fiddler,参考如何用 fiddler 代理调试本地手机页面),浏览器访问 www.ctrip.com,

修改nginx配置文件 location / { root ... index ... try_files $uri $uri/ /index.html; ---解决页面刷新404问题 } (参考官网 https://router.vuejs.org/zh-cn/essentials/history-mode.html)

1,reload 方法,该方法强迫浏览器刷新当前页面. 语法:location.reload([bForceGet]) 参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取当前页.true, 则以 GET 方式,从服务端取最新的页面, 相当于客户端点击 F5("刷新") if (evt instanceof NavigationError) { _message.error(无法加载${evt.url}路由, { nzDuration: 1000 * 3 })

package.json { "name": "vue-cli", "version": "1.0.0", "description": "A Vue.js project", "author": "lizhi@camelotchina.com", "private": true, "scripts": {

git强制覆盖本地命令(分步执行): git fetch --all    git reset --hard origin/master    git pull git强制覆盖本地命令(单条执行):    git fetch --all && git reset --hard origin/master && git pull

//查询当前远程的版本 $ git remote -v //获取最新代码到本地(本地当前分支为[branch],获取的远端的分支为[origin/branch]) $ git fetch origin master [示例1:获取远端的origin/master分支] $ git fetch origin dev [示例2:获取远端的origin/dev分支] //查看版本差异 $ git log -p master..origin/master [示例1:查看本地master与远端origin

chrome的开发者工具,在source选项卡下,可以看到js的源代码,有一个断点调试功能,就是在js的源代码行号那里点击一下,出现一个箭头,当再次刷新页面并且进行了相应操作时,就会停在断点的地方.我们可以查看相应的变量值,在右侧可以手动改变变量值,进行调试. 这个地方有一个缺点,就是没有办法对代码表达式等进行手动修改,修改完再去运行调试.如果我们在编辑窗口更改了js,他并不能真正的作用于线上代码.你保存了也没有任何效果,你刷新了页面,直接就没有了,没有办法像css的调试那样,可以完全实时修改代

现在科技太发达,移动设备像素越来越高,随便一张照片2M+,但是要做移动端图片上传和pc上略有不同,移动端你不能去限制图片大小,让用户先处理图片再上传,这样不现实.所以理解的解决方案就是在上传先进行图片压缩,然后再把压缩后的图片上传到服务器. 一翻google之后,发现了localResizeIMG,它会对图片进行压缩成你指定宽度及质量度并转换成base64图片格式,那么我们就可以把这个base64通过ajax传到后台,再进行保存,先压缩后上传的目的就达到了. 处理过程 LocalResizeIM

家都知道在前端开发过程中,为加快网站静态资源加载速度都会对js/css等静态资源进行压缩合并再部署到生产环境,而在实际开发过程中开发人员一般都是在开发环境进行源码文件开发调试的,当部署平台或部署人员将开发人员提交的前端代码进行压缩合并为压缩文件后,当遇到生产环境出现问题之后很难通过压缩文件去定位问题,所以如何让开发人员便利的调试线上代码,并迅速定位问题是部署及运维网站需要考虑的重要考量的地方,此文档教程将描述如何使用chrome浏览器进行线上调试源码问题. Step-by-step guide

最近帮新来的校招同学排查一个线上问题,问题本身不是很难,但是过程中踩到了一个arthas的坑,挺有意思的. 同时,也分享下在排查过程中使用的一些比较实用的工具,包括tcpdump.arthas.simpleHTTPServer等,希望能对大家有所帮助. 1.问题描述 新开发的一个功能,简单来说,就是读取数据库的数据展示在前台. 本地启动服务调试,用postman调用api,返回数据显示正常,数据中的中文也正常. 但是部署到线上环境后,通过chrome浏览器调用和postman调用接口,返回的非中

距离上一篇博客,这篇文章的发布大概过了整整三个月.我也从饿了么度过了试用期,成为了正式员工.刚进来恰好遇到项目底层改造和迁移,将项目从angular全部迁移到vue上,所以适应这边的节奏和业务的开发任务.而且这段事件用过mint-ui这个h5的框架,感觉太老了,想自己开发一套ui组件了,所以一直忙呀忙.顺带最近绝地求生比较火,然后也拉了几个小伙伴一起玩了好长时间,所以节奏有点慢了.下面废话不多说了,直接进入主题. 上一篇博客介绍了基础的纯概念,这篇文章纯粹偏技术实践,需要理解一些玩意的.技术介绍

在之前的文章中,我介绍了使用 Btrace 工具进行线上代码的debug (https://www.cnblogs.com/yougewe/p/10180483.html),其大致原理就是通过字节码注入的方式进行辅助排查. 可以说,btrace 已经给我们的开发调试一带来了许多的方便,我们在上面做任何想要的调试!但是,明显, btrace 的使用还是有一定成本的,比如:安装应用,写调试脚本... 所以,今天我们再来看一大利器: arthas (阿尔萨斯) arthas 官网地址:https://

MyBatis上线前后的版本:上线前(3.2.3)上线后(3.4.6) 服务上线后,开始陆续出现了一些更新系统交互日志方面的报警,这属于系统的辅助流程,报警如下代码所示.我们发现都是跟 MyBatis相关的报警,说明在进行类型转换 [ibatis.type.TypeException]的时候,系统产生了强转错误. 更新开票请求返回日志, id:{#######}, response:{{"code":XXX,"data":{"callType":

需求背景: 由于业务需求,需要在线上用户表添加渠道字段,用于区分不同渠道注册的用户,目前该表有20+个字段,8个索引 线上用户数据大概1500W左右,需要不停机增加数据库字段,同时需要刷新Redis缓存中的用户数据 发生的问题: 问题1.添加字段可能会锁表,影响线上业务的操作: 问题2.删除Redis缓存中的数据,数据量过大,无法直接精准的进行删除处理,可能的情况就是造成一边删除旧用户信息,一边生成新用户信息 解决方案: 针对于问题一: 由于MySQL5.6版本以后,提供了在执行DDL语句时,无

一.Arthas简介 Arthas是Alibaba开源的Java诊断工具,功能很强大,它是通过Agent方式来连接运行的Java进程.主要通过交互式来完成功能. https://arthas.aliyun.com/doc/stack.html 首先贴出官方文档,自己使用也不多,主要用于一次线上问题排查 二.运行 java -jar arthas-boot.jar ,运行Arthas 选择要粘附的进程,输入编号即可 使用以下两个命令其中一个查看java程序的进程号ps -efjps 备注:也可以通

chrome浏览器调试线上文件映射本地文件 通过ReRes让chrome拥有路径映射的autoResponse功能. 前端开发过程中,经常会有需要对远程环境调试的需求.比如,修改线上bug,开发环境不在本地等等.我们需要把远程css文件或者js映射到本地的文件上,通过修改本地文件进行调试和开发.通常我们可以通过以下方法来实现映射: 1.修改host文件——只能把域名映射到IP 2.使用Apache或者nginx搭建反向代理——需要装环境,配置相对繁琐 3.使用Fiddler中的AutoRespn