随笔分类 - 调试方法
摘要：参考： 前端内存优化知多少？内存泄露只是冰山一角 如何定位前端内存泄漏问题 使用 chrome-devtools Memory 面板 使用Chrome Profiles排查内存泄漏
阅读全文
摘要：前言 问题一：在开发内嵌H5页面时，涉及前端与客户端交互，那么涉及客户端的代码在本地是无法执行的，只有在真机上能执行，如果执行时发现问题，如何调试呢？ 方案 方案一：使用vconsole，可以查看DOM结构、接口调用，但无法查看CSS样式，也可以在关键位置打日志，但是无法打断点debug调试，所以调
阅读全文
摘要：前言 问题一：我们在App内嵌H5开发的过程中，如果想要看测试环境下，页面在手机中真实渲染的相关信息，例如：DOM结构、CSS样式、接口调用怎么办呢？ 问题二：我们在App内嵌H5开发的过程中，如果想要看本地环境下，页面在手机中真实渲染的相关信息，例如：DOM结构、CSS样式、接口调用怎么办呢？ t
阅读全文
摘要：前言 问题一：我们在App内嵌H5开发的过程中，如果想要看线上环境下，页面在手机中真实渲染的相关信息，例如：DOM结构、CSS样式、接口调用怎么办呢？ tip：DOM结构就像在chrome控制台中看到的那种，可以看到层级关系，以及js动态渲染的DOM呈现 方案 方案一：使用charles，可以查看接
阅读全文
摘要：https://www.jianshu.com/p/dfb83f31d596 https://blog.csdn.net/sansan_7957/article/details/90641505 https://segmentfault.com/a/1190000039163355 https://
阅读全文
摘要：前言 在开发时经常需要测试会员和非会员，还需要不断付款，非常麻烦，有没有办法可以减少繁琐的操作？ 方案 使用Breakpoints拦截响应，更改代表用户身份以及付款状态的字段 步骤 1、配置移动端代理 详情见Charles学习（一）之macOS Charles 4.x版本的安装、激活、使用以及软件功
阅读全文
摘要：新版本的whistle支持三种等价命令whistle,w2,wproxy 启动whistle w2 start 启动时指定端口 w2 start -p 8899（// 不设置端口默认使用8899） 默认端口为8899，如果端口被占用，要修改端口号，可以通过 -p来指定新的端口号 停止whistle
阅读全文
摘要：前言 whistle是基于Node实现的跨平台抓包调试代理工具，有以下基本功能： 查看HTTP、HTTPS请求响应内容 查看WebSocket、Socket收发的帧数据 设置请求hosts、上游http/socks代理 修改请求url、方法、头部、内容 修改响应状态码、头部、内容，并支持本地替换 修
阅读全文
摘要：项目中实际使用 在项目中实际使用的时候发现还是有很多问题的 最初使用方式 <script src="vconsole.min.js"></script> <script> // init vConsole var vConsole = new VConsole(); </script> 问题一：按照
阅读全文
摘要：参考 使用方法 移动端真机debug调试神器 vConsole的引入说明（原生态与WebPack） 移动端使用vconsole调试console vConsole ——开源的前端 console 调试面板 下载地址 Github BootCDN
阅读全文
摘要：前言 问题一：我们在App内嵌H5开发的过程中，肯定会遇到一个问题就是我不想在chrome的控制台中调试也不想在模拟器中调试，我想要在真机上调试，那么如何解决这个问题呢？ 问题二：我们期待调试时达到的效果就是和Charles学习（二）之使用Map local代理本地静态资源在Mac上调试移动端中实现
阅读全文
摘要：前言 问题一：我们在App内嵌H5开发的过程中，肯定会遇到一个问题就是我不想在chrome的控制台中调试，我想要在手机上调试，那么如何解决这个问题呢？ 问题二：我们期待调试时达到的效果就是和Charles学习（二）之使用Map local代理本地静态资源在Mac上调试移动端中实现的效果相同，也就是说
阅读全文
摘要：前言 我们在开发的过程肯定是一边写代码，一边查看自己的代码写的是否存在问题，那么问题来了，有两种情况 情况一：我们可以本地起服务，那么我们就可以在本地检查自己的代码，查看运行结果 情况二：本地无法起服务，那么我们怎么办？难道要改一点就要上预发？ 方案 情况二方案：配置移动端代理 | 使用Map lo
阅读全文
摘要：Chrome开发者工具详解(3)：Timeline面板
阅读全文
摘要：Chrome开发者工具面板 面板上包含了Elements面板、Console面板、Sources面板、Network面板、 Timeline面板、Profiles面板、Application面板、Security面板、Audits面板这些功能面板。 按钮的功能 Elements:查找网页源代码HTM
阅读全文
摘要：Elements面板 实时编辑DOM节点和CSS样式 双击DOM树视图里面的节点，可以实时编辑标签属性，修改的效果会立刻反应在浏览器里 点击右侧Style面板，可以实时修改CSS的属性值，这里面的所有样式Name和Value都是可以编辑的;在每个属性后面单击可以添加新的样式，如下图 ： 点击右侧Co
阅读全文
摘要：JS调试技巧 技巧一：格式化压缩代码 技巧二：快速跳转到某个断点的位置 右侧的Breakpoints会汇总你在JS文件所有打过的断点，点击跟checkbox同一行的会暂时取消这个断点，若是点击checkbox下一行的会直接跳转到该断点的位置 技巧三：查看断点内部的作用范围【很实用】 右侧的scope
阅读全文
摘要：前言 Charles是mac上一款比较好用的抓包工具，那么我们什么情况下需要用到抓包工具呢？比如我想查看一个接口请求的参数、返回值，还有移动设备上的http/https请求。 Charles是一个HTTP代理服务器,HTTP监视器,反转代理服务器，当浏览器连接Charles的代理访问互联网时，Cha
阅读全文
摘要：参考：移动端调试痛点？——送你五款前端开发利器（永久） 参考： 移动端调试痛点？——送你五款前端开发利器
阅读全文