小技巧:不同类型的数据从 console 中打印出的颜色也不相同,可以借此判断数据类型
我们知道所有请求,无论是页面请求还是js 发起的各种请求,最终都是通过浏览器软件发起的,服务器响应后,都是响应给浏览器的,那么整个工程可以细分为如下流程(个人理解):
内容来源:作者,深予之 (@senntyou),https://github.com/senntyou/blogs;来自,https://segmentfault.com/a/1190000016852780
我们系统程序的漏洞就叫 bug。世界上第一个 bug ,是 1946 年霍普发现了第一个电脑上的 bug,竟然是一只飞蛾“臭虫”。解决这些问题的过程叫做捉虫、调试,也就是 Debug。
本文介绍 webpack 构建 web 应用的时候生成 sourcemap 的相关基础知识。 sourcemap 不仅适用于 chrome 浏览器,也适用于其它很多现代浏览器,本文主要针对 chrome
这篇文章是笔者近期关于Weex在iOS端的一些研究和实践心得,和大家一起分享分享,也算是对学习成果的总结。文章里面提到的做法也许不是最佳实践,也许里面的方法称不算是一份标准的指南手册,所以标题就只好叫“伪最佳实践指北”了。有更好的方法欢迎大家一起留言讨论,一起学习。
我们从事 Web 开发工作中,异常监控系统已经是我们朝夕相处的好助手,但是这些异常处理工具通常都是建立在 Web 生态,或者是假定运行在浏览器环境下的,但是当我们需要给一套跨端系统搭建一套类似的异常监控系统,并且期望该系统兼容 Web 生态,现有的工具很可能就不满足我们的需求了,因此我们需要考虑一套完整的异常监控系统整个链路将会涉及到哪些工具链,以及如何修改这些工具链来适配我们的跨端系统。
你会发现代码在抛异常的地方断住了,这就是异常断点的功能。当你不知道哪里抛的异常的时候,可以用这个。
项目上线之后,突然,我们意识到了什么:接口返回的数据是否需要变更?打包的 js 文件是否漏了添加某个提示?等等...
来源:子慕大诗人 http://www.cnblogs.com/1wen/p/7942608.html 导火索 有一天一个测试同事的一个移动端页面白屏了,看样子是页面哪里报错了。 我自己打开页面并没有报错,最后发现报错只存在于他的手机,移动端项目又是在微信环境下,调试起来会比较麻烦,最后用他手机调试才发现问题: 是他账户下面有个对话的消息数据有问题导致页面报错了。 一般遇到这种情况只有用他的手机或者账户调试能很快查到问题,如果是外部的用户怎么办,我没法拿他的手机去测试。 📷 其实这个问题很常见,但是这次我觉
3.急速 debug 实战三 (Node - webpack插件,babel插件,vue源码篇)
文篇主要介绍源代码映射,源代码映射(Source maps)是以.map结尾的文件,例如example.min.js.map和styles.css.map。大多数构建工具都可以生成源代码映射文件,例如Vite、webpack、Rollup、Parcel、esbuild等,一些工具默认包含源代码映射,而其他工具则需要额外的配置才能生成它们。
node.js是一个划时代的技术,它在原有的Web前端和后端技术的基础上总结并提炼出了许多新的概念和方法,堪称是十多年来Web开发经验的集大成者。转转公司在使用node.js方面,一起走在前沿。8月16日,转转公司的FE王澍老师,在镜泊湖会议室进行了一场主题为《nodejs全栈之路》的讲座。优秀的语言、平台、工具只有在优秀的程序员的手中才能显现出它的威力。一直听说转转公司在走精英化发展战略,所以学习下转转对node.js的使用方式,就显得很有必要。 对于大多数人使用node.js上的直观感受,就是模块、工具很齐全,要什么有什么。简单request一下模块,就可以开始写javasript代码了。然而出自58同城的转转,同样存在大量服务,使用着58自有的rpc框架scf。scf无论从设计还是实际效果,都算得上业内领先。只不过在跨平台的基础建设上,略显不足。从反编译的源码中,可以找到支持的平台有.net、java、c、php。非java平台的scf版本更新,也有些滞后。之前还听说肖指导管理的应用服务部,以“兼职”的方式开发过c++版客户端。而且也得到umcwrite等服务的实际运用。所以node.js解决好调用scf服务,是真正广泛应用的前提。这也正是我最关心的问题。 王澍老自己的演讲过程并没有介绍scf调用的解决方案,但在提问环节中,进行了解答。我能记住的内容是,目前的采用的方案是使用node-java模块,启动一个jvm进程,最终还是在node.js的项目中编写的java代码,性能尚可接受,但使用中内存占用很大;王澍老师也在尝试自己使用c++开发模块来弃用node-java。 这确实很让我很失望,我所理解的node.js应该是与性能有关的部分,几乎全部是c++编写的。之前肖指导要求发布公共服务,改写成使用scf提供的异步方式执行,借那次机会,我也阅读了一部分反编译的scf源码。感觉如果只是解决node.js调用scf的问题,不应该是个很难的事情。像管理平台、先知等外围功能,可以后期一点点加入。正巧我一直在质疑自己是不是基础差的问题,干脆写一个node.js版的scf客户端,来试试自己的水准。 结合自己之前对node.js的零散知识(其实现在也很零散)。对这次实践提出如下的一些设计要点: 1、序列化版本使用scfv3,虽然难度应该是最大的,但应该能在较长的时间内避免升级序列化版本的琐事。 2、使用管理平台读取配置,禁用scf.config类似的本地配置。想想之前许多部门,推进禁用线上服务直连的过程,就觉得很有必要(管理平台也用线下环境,线下调试根本不是阻碍)。 3、客户端支持全类型,之前偶尔听说了c++版客户端不支持枚举类型,使得有些服务只能调整接口。 4、c++使用libuv库,具备跨平台开发、调试能力。c++版客户端听说只支持linux平台。 5、只提供异步接口,这是当然的,不然node.js就别想用了。
Replay回放按钮:比较常用,捕捉到一个会话之后想回放这个会话,就可以点这个按钮。
不知道使用 ios 设备的博友在浏览本站页面的时候有没有发现一个问题,所有页面评论模块都是不显示的!(记得大胡子哥有评论提醒过我移动端不能评论,还问我是不是故意这样设置的,其实这就是个bug)通过 MAC 审查可以发现控制台报错了,似乎是一个正则语法问题,但这个问题一直以来都没有得到解决,直到今天为止。
微信小程序在打包时,会将所有 js 代码打包成一个文件,从而减少体积,加快访问速度。
1.7.1拆分了录屏代码,BUG监控插件压缩至18K,另外我们还原了部分Script error,帮助用户更方便地Debug。请大家及时更新哈~
我常常看到不少开发者不懂如何Debug JavaScript代码,因此决定写一篇博客为初学者介绍如何Debug。我希望这篇文章可以提供一些有用的信息。我尝试在本文讲述很多内容,所以有些部分并没有讲得很细。 在开始之前,做一些基本的准备: 这是针对浏览器运行的JavaScript,而不是Node.js; 你需要有一定的编写JavaScript的基础; 你需要在概念上知道Debug是什么; 你最好动起手来,边看边操作。 注意:1. 你最好打开两个窗口,一边看一边操作来学习;2. 本文的主要目的是教会你debug
Fiddler是一个http调试代理,它能 够记录所有的你电脑和互联网之间的http通讯,Fiddler 可以也可以让你检查所有的http通讯,设置断点,以及Fiddle 所有的“进出”的数据(指cookie,html,js,css等文件,这些都可以让你胡乱修改的意思)。 Fiddler 要比其他的网络调试器要更加简单,因为它仅仅暴露http通讯还有提供一个用户友好的格式。 Fiddler 包含一个简单却功能强大的基于JScript .NET 事件脚本子系统,他非常灵活性非常棒,可以支持众多的http调试任务。Fiddler 是用C#写出来的。
通俗的来说, Source Map 就是一个信息文件,里面存储了代码打包转换后的位置信息,实质是一个 json 描述文件,维护了打包前后的代码映射关系。关于 Source Map 的解释可以看下 Introduction to JavaScript Source Maps[7]。
Source Map,就是能让我们在线上调试时看到原始代码的一种技术,它实际是一个是个映射文件,它提供了【压缩合并后代码】到【原始代码】间的行列转换关系。
假设所有的前端程序员的技术水平都是0,二三年之后必然会有一些人水平拨尖。那么是什么造成了他们之间的区别呢?就学习态度来讲,好像许多水平平庸的程序员,他们也是经常学习的呀。 直白的讲,学习这件事是很让人望而生畏的。许多人满足于明白了,会用了,了解了,知道了,然后就止步于此。为什么呢?因为再往下继续深入研究,就会很累。 反正只是打工而已,挣工资罢了,为什么要让自己那么辛苦呢?所以,许多人不愿意去看源码。不愿意去看这你平时用的那些工具框架的结构和思想。至于github上的开源资源,更是从来不看。 心理学上有一个词
有时出现的线上bug在测试环境死活都不能复现,靠review代码猜测bug出现的原因,然后盲改代码直接在线上测试明显不靠谱。这时我们就需要在生产环境中debug代码,快速找到bug的原因,然后将锅丢出去。
接到一个紧急修复需求,发现一个 H5 游戏在 iOS9 下显示高度没有铺满屏幕,需要调整高度达到自适应。
前言:以前一直认为性能优化很遥远,也很复杂,但当今天尝试过后,发现也并不是触不可及
Nginx那么好,我想去看看。 接连逛了两个书城后,我发现并没有Nginx相关的书籍。 这就很奇怪!
工作中时常遇到需要对自己已上线 app 中的 WebView 网页进行一些调试验证的情况,以排查 bug,解决问题。
大家好,我是7small7,一位混迹互联网多年的IT民工。今天来给大家分享一个世界互联网大厂都在用的软件(Fun Debug)。
新建一个文件夹 vue2.0-learn 。_前提是默认已经安装了nodejs和npm_
最近接触了typecho 所以PHP肯定就离不开手了 这里记录一些平常开发的一些小技巧
web-see[1] 前端监控方案,提供了 前端录屏+定位源码 方式,让bug无处藏身
由于本教程涉及的所有修改对缩进格式等有严格要求,担心自己控制不好的可以直接下载静态资源,将压缩包内的butterfly文件夹复制到[Blogroot]\theme\目录下覆盖现有主题文件夹即可跳过以下教程的前3步,直接到主题配置文件_config.butterfly.yml中参照第4步修改配置项。
NPM实用指北 npm作为下载node附送的大礼包,大家一定不会陌生。 然而关于npm,估计大量的只是用到npm install XXX以及npm run XXX。 其实这里边还有很多有意思的命令&参数。 关于npm,大概有两个作用: 能让我们很方便的从网上下载第三方包进行实现功能 能够让我们自己编写包,并上传到网上供其他人下载 下载相关的操作 下载主要就是围绕着install这一个命令来的。 install 可以简写为 i 安装原有的依赖包 当我们处于一个项目下时,执行np
npm作为下载node附送的大礼包,大家一定不会陌生。 然而关于npm,估计大量的只是用到npm install XXX以及npm run XXX。
Fundebug是专业的程序BUG监控服务,当线上应用出现BUG的时候,我们可以第一时间报警,帮助开发者及时发现BUG,提高Debug效率。
上篇向大家介绍完了基础功能篇,这次分享的是Chrome开发工具中最有用的面板Sources。 Sources面板几乎是我最常用到的Chrome功能面板,也是在我看来决解一般问题的主要功能面板。通常只要是开发遇到了js报错或者其他代码问题,在审视一遍自己的代码而一无所获之后,我首先就会打开Sources进行js断点调试,而它也几乎能解决我80%的代码问题。Js断点这个功能让人兴奋不已,在没有js断点功能,只能在IE(万恶的IE)中靠alert弹出窗口调试js代码的时代(特别alert一个object根本不会理你),那样的开发环境对于前端程序员来说简直是一场噩梦。本篇文章讲会介绍Sources的具体用法,帮助各位在开发过程中够愉快地调试js代码,而不是因它而发疯。首先打开F12开发工具切换到Sources面板中:
软件运行环境,狭义上讲是软件运行所需要的硬件支持。广义上也可以说是一个软件运行所要求的各种条件,包括软件环境和硬件环境。 也就是程序的运行平台,我们通常所说的程序是指应用程序,就是在运行平台(即系统程序)上进行二次开发出来的应用软件
但当有人反应说「你的网页好慢」 甚至当网路速度慢,会造成你的网页跳出什么啊哩不哒的bug时要如何重现呢?
今天的引擎版本更新又是一次大版本更新,不仅推出了2.2正式版,还有重磅版本2.3.0beta版,关于本次重要的版本更新内容,本篇逐一为大家进行详细介绍。
第一种是项目分离,承载页面分离。他的特点是简单,快速,前端只关注浏览器方面,除浏览器端之外都是后端负责。当然缺点是沟通成本高,前期,前端需要使用 ng 或者代理工具调试,后期,还要把页面给到后端,并且新建一个对应的路由。这样来来回回,调试非常的复杂,一旦前后端同学涉及到跨部门,跨楼层合作,这些成本又会相应的增加。
初页现有架构 首先介绍一下初页目前的架构。它主要由计算服务和后面的运维与运营系统组成。 📷 计算服务由passport、works(作品服务)、social、message、counter组成,每一个服务集群都是一个域名,自己管理缓存,存储,计算等。类似这样的服务初页还有若干。运营系统主要是Boss系统,里面涵盖了各种大大小小的报表。同时,还具有数据上的运营能力。运维则是由日志,监控,部署和分析审计这些系统组成。 遇到过的坑 这些系统如何是如何工作的呢?请往下看。 📷 这个是一
一、如何查看dom元素的事件 某种情况我们在页面交互上发现一个问题,肯定是非常想知道这个交互触发执行的入口,这会使我们更直接、快速的进行代码的跟踪、调试和分析。其实在chrome浏览器这很简单就实现了
小程序的渲染层和逻辑层分别由两个线程管理,两个线程的通信由微信客户端(Native)做中转。
Fiddler:译名—小提琴手,有Eric开发,曾就职微软。 Fiddle支持多个平台的版本: Windows: https://www.telerik.com/download/fiddler Mac/Linux: http://fiddler.wikidot.com/mono
whistle 相当于一个连接客户端和远程服务器的“中转站”,当你向服务器发出请求后,代理服务器先获取用户的请求,再将服务请求转发至远程服务器,并将远程服务器反馈的结果再转交给客户端。
在本文中,介绍3个鲜为人知,但功能非常强大且体积很小的 JavaScript 库,这些可以帮助提高开发效率,减轻开发难度,让你加班少少的,请收纳。
Fundebug提供专业的异常监控服务,当线上应用出现 BUG 的时候,我们可以第一时间报警,帮助开发者及时发现 BUG,提高 Debug 效率。在网页端,我们通过原创的录屏技术,可以 100%还原 BUG 出现之前用户的操作流程,帮助开发者快速复现出错场景。点击查看演示视频。
领取专属 10元无门槛券
手把手带您无忧上云