前端知识库(lizh)
  • README
  • Bugs
    • 前端调试随笔
    • 浏览器常见问题概览
    • 浏览器兼容问题概览
    • HTML常见问题概览
    • CSS常见问题概览
    • JS常见问题概览
    • 移动端兼容性问题概览
    • 微信小程序开发
    • NodeJs常见问题概览
    • Mac常见问题概览
    • 微信开发遇坑指南
    • Npm包常见问题概览
    • 其他问题汇总
  • Css探索系列
    • CSS基础知识
    • CSS常见问答
    • CSS常见问答02
    • CSS应用示例
    • CSS应用示例02
    • 由Z Index引发的层叠上下文思考
    • 由浮动塌陷引发的块级格式上下文思考
    • CSS探索系列 Flex布局
    • CSS探索系列 Margin
    • CSS探索系列 Auto关键字
    • CSS探索系列 Gradient
    • CSS探索系列 Line Height
    • CSS探索系列 元素居中
    • CSS探索系列 动画
    • 为什么使用PostCSS处理CSS?
    • 重新认识伪类与伪元素
    • 自定义表单伪元素样式
    • 如何理解Css中的Display属性
    • 视口和软键盘对视口的影响
    • 关于Css
  • Frontend
    • 00 关于Web前端
    • 01 前端知识概览
    • 02 常用前端库概览
    • 基础 00 前端常见问题01
    • 基础 01 浏览器缓存
    • 基础 02 浏览器工作原理
    • 基础 03 谈谈前端跨源问题及解决方法
    • 进阶 01 Web性能优化
    • 进阶 02 搜索引擎优化(SEO)
    • 进阶 03 前端模块化编程
    • 进阶 04 规范代码:Linter、Prettier、EditorConfig
    • 进阶 11 前端自动化测试
    • 高级 01 前端安全
    • Vue2.X原理篇
    • Vue3初步了解及迁移指南
    • 重读Vue教程
    • React17.X原理篇
    • 你必须知道的React问题
    • 重读React教程
    • 聊一聊Cookie的一些问题
    • 如何理解HTTP响应的状态码
    • HTTP的历史演变及概述
    • Webpack4.X原理篇
    • Webpack基础入门篇
    • Webpack构建优化篇
    • TypeScript使用指南
    • 代码规范
      • 前端规范
      • HTML
      • CSS
      • JS
  • Html探索系列
    • HTML基础知识
    • HTML基础知识02
    • HTML常见问答
    • HTML经典实践用例
    • HTML元素的宽高及位置详解
    • Video元素的使用和常见问题总结
    • Html探索系列 Meta标签
    • DOCTYPE:文档类型与浏览器模式
    • DHTML(动态网页)简介
    • HTML标签详解
    • HTML布局的几种方式
    • HTML全局属性
    • 关于Html
  • Js探索系列
    • 基础知识
    • 常见问答
    • 应用示例
    • 趣味示例
    • 基础篇 05 AJAX
    • 基础篇 06 Window对象
    • 基础篇 07 Error、JSON、Math、Console对象
    • 基础篇 08 History、URL、Screen、Navigator、Location对象
    • 基础篇 09 文档对象模型(DOM)
    • 基础篇 10 Document对象
    • 基础篇 11 Element对象
    • 基础篇 12 Event对象
    • 基础篇 13 键盘、鼠标、触摸事件
    • 基础篇 15 CSS对象模型(CSSOM)
    • 进阶篇 01 Prototype对象和继承
    • 进阶篇 02 Promise对象
    • 进阶篇 07 迭代器(Iterator)
    • 进阶篇 08 Generator和Async函数
    • 进阶篇 09 JavaScript异步编程
    • Date对象和日期时间字符串格式
    • Canvas基础入门篇
    • Canvas进阶篇
    • SVG基础入门篇
    • 四种判断数据类型方法的优缺点
    • 深入理解JavaScript的浅拷贝和深拷贝
    • 谈谈JavaScript的作用域和上下文
    • 复制内容到剪贴板
    • 关于Javascript
  • NodeJs
    • 关于Node.Js
    • Node.Js:三种调试方法
    • Npm包管理器简介及一些机制
    • NPM:Package.Json详解(中文)
    • NPM:从零开始,开发一个软件包
    • NPM:常用命令
    • Node.Js:Fs(文件系统)
    • Node.Js:Global(全局变量)
    • Node.Js:HTTP
    • Node.Js:Module(模块)
    • Node.Js:Path(路径)
    • Node.Js:Readline(逐行读取)
  • Research
    • 极细边框(1px边框)实现方式
    • 如何监控前端异常?
    • H5页面跳转和刷新
    • Web主题切换和个性化定制方法总结
    • Vue SSR(服务端渲染)的简单实现
    • 基于Create React App打造代码规范化的React+Ts项目
    • H5可视化编辑
    • Web常用功能
    • Javascript加密混淆
    • Vue如何导入TypeScript
    • 移动端PDF预览
    • 纯CSS绘制箭头
    • 网站性能测量和优化方法
  • Tech
    • GOOGLE浏览器的搜索技巧
    • Curl的用法指南
    • Sublime3插件篇
    • Charles安装及使用
    • Nginx基础使用
    • 排序算法(Javascript)
    • 代码整洁之道(摘录笔记)
    • Java的24种设计模式与7大原则
    • 观察者和发布订阅模式
  • Tools
    • Git
      • Git基础教程
      • Git常见问题
    • Gitbook
      • Gitbook入门篇
      • Gitbook插件篇
      • Gitbook进阶篇
由 GitBook 提供支持
在本页
  • Debug指南
  • 调试工具
  • 移动端真机调试

这有帮助吗?

  1. Bugs

前端调试随笔

Debug指南

异步问题

前端出现异步的因素有:动画、HTTP 请求、DOM 渲染、定时器等。

缓存问题

浏览器缓存、CDN缓存、路由器的缓存。

  • 实例一:CDN 中缓存的 JQuery 文件不完整,导致部分用户打开页面出错。(因为是部分CDN缓存出错,前端非常难定位问题。)

  • 实例二:本地的 localStorage 缓存,在某些情况下不能再用时,没有定义有效的清除机制。

网络问题

第三方插件链接出错、部分地区网络出错、是否正确使用 http 和 https。

  • 实例一:微信好友分享,由于使用了默认协议 //,导入分享不成功。

es6语法支持

是否使用了 canvas\promise 或者使用了 es6 中的一些语法,但是没有用 babel 转换或者没有引入 polifyfill。

Babel 最核心的依赖: @babel/cli、@babel/core、@babel/polyfill、@babel/register、core-js。

"@babel/cli": Babel 自带了一个内置的 CLI 命令行工具,可通过命令行编译文件。
"@babel/core": `babel`的核心,一些转码操作都是基于它完成的
"@babel/polyfill": Babel默认只转换新的JavaScript语法,但是不转换新的API,比如:`Iterator`、`Generator`、`Set`、`Maps`、`Proxy`、`Reflect`、 `Symbol`、`Promise` 等全局对象,以及一些定义在全局对象上的方法(比如 `Object.assign`、`Array.findIndex` )都不会转码。而`@babel/polyfill`就可以做到。
"@babel/register": 让webpack.config.babel.js也支持ES6语法
  • 实例一:JS 中用了 findIndex 方法,由于某些原因,该 JS 文件没有经过 babel 转换,导致在一些低端手机执行 JS 出错,而控制台没有详细的报错信息,问题定位困难。

Cookie问题

请求无法携带 cookie 问题:浏览器是否标禁用了 cookie、跨站导致 cookie 无法发送成功、HTTP 请求未设置允许跨站。

浏览器中的 cookie 是可以重写的,使用时要特别注意。

  • 实例一:由于开启了 Mock.JS,导出 cookie 无法携带,HTTP 请求报跨域错误。

  • 实例二:联调本地页面时,IOS 设备上出现循环登录现象。原因是 Cookie 无法跨域携带。解决方案:原生开发放开 APP 禁止跨网站发送的限制,比如,设置 -> 找到【APP】 -> 开启【允许跨网站跟踪】。

  • 实例三:页面反复出现未登录提示。原因是前端根据 URL 链接中的参数,用 JavaScript 重写的 Cookie 的 token 的值(还有一种,同域名下有两个不同项目,登录体系不一样,但都依赖 token,导致相互重写),同时,由于服务端的一些逻辑,并未判断该用户未登录,返回的不是约定的 401 状态,而是其他错误状态。

调试工具

IETester,一款免费的 WebBrowser,允许在 Windows 8、Windows 7、Vista、XP 上拥有 IE 5.5~11 的渲染和 JavaScript 引擎,可以于调试不同版本的 IE 浏览器的兼容性。

移动端真机调试

IOS真机调试

IOS 设备可以通过 safari 调试,但必须满足如下条件:

  • safari 打开开发者模式:Safari浏览器 -> 偏好设置 -> 高级 -> 在菜单栏中显示“开发”菜单;

  • IOS 设置 safari ,允许调试;

  • 原生打开允许 app 的调试的限制,即,安装的应用是可调试版本的;

  • 需要原生将该设备加入白名单。

使用数据线连接设备和电脑,Safari 点开开发者调试。

Andriod真机调试

Andriod 设备可以通过 Chrome 调试,但必须满足如下条件:

  • Android 设备系统版本为 4.4 以上;

  • 开启开发者模式:设置 -> 关于手机 -> 连续点击系统版本。(不同机型开启模式有异差)

  • 系统安全 -> 未知来源 -> 允许;

  • 选择开发者选项:允许 USB 调试。

电脑连接手机:Mac 电脑使用 【Android File Transfer for mac】管理安卓机文件(需自行下载,并在加接手机前运行该软件)。

上一页README下一页浏览器常见问题概览

最后更新于1年前

这有帮助吗?

,Chrome 浏览器内置的 Web 开发和调试工具。

,针对手机网页的前端开发者调试面板。

:一个用于移动浏览器的控制台,类似 DevTools 的迷你版,其主要功能包括:捕获 console 日志、检查元素状态、捕获 XHR 请求、显示本地存储和 Cookie 信息等等。

,Firefox 浏览器内置的 Web 开发工具,用来检查、编辑和调试 HTML、CSS 和 JavaScript。

,为了帮助开发者简单和高效地开发和调试微信小程序,在原有的公众号网页调试工具的基础上,推出了全新的 微信开发者工具,集成了公众号网页调试和小程序调试两种开发模式。

,是最强大最好用的 Web 调试工具之一, 它能记录所有客户端和服务器的 http 和 https 请求。允许监视、设置断点、甚至修改输入输出数据。

,是一个 HTTP 代理 / HTTP 监视器 / 反向代理,它使开发人员能够查看他们的机器和 Internet 之间的所有 HTTP 和 SSL / HTTPS 通信。 这包括请求、响应和 HTTP 报头(其中包含 cookie 和缓存信息)。

,是一个 IE 的 Web 开发栏,分为工具栏和侧边栏。 它的目的是帮助您调试您的网站更快或快速分析任何网页。

,用于生成随机数据,拦截 Ajax 请求。

使用数据线连接设备和电脑,Chrome打开:

Chrome DevTools
vConsole
Eruda
Firefox DevTools
微信开发者工具
Fiddler
Charles
Debugbar
mockjs
chrome://inspect/#devices