chrome前端页面调试+手机WEB调试

chrome前端页面调试+手机WEB调试

1.调试方法

掌握一定的调试方法可以快速排查和定位问题，大幅度提高开发效率。常用的前端调试工具：chrome浏览器。
调试方法：在要调试的页面右键，选择检查即可打开调试工具(F12)，其中最常用的调试功能为：

• Element 标签页： 用于查看和编辑当前页面中的 HTML 和 CSS 元素。
• Console 标签页：用于显示脚本中所输出的调试信息，或运行测试脚本等。
• Source 标签页：用于查看和调试当前页面所加载的脚本的源文件。
• Network 标签页：用于查看 HTTP 请求的详细信息，如请求头、响应头及返回内容等。

• Application标签页：可以检查和修改IndexedDB与Web SQL数据库，本地和会话存储，cookie，应用程序缓存，图像，字体和样式表。点击一次按钮即可清除所有存储、数据库、缓存和服务工作线程。

  2.手机web调试

  2.1Chrome DevTools模拟手机调试
  直接使用谷歌浏览器的开发者工具，也可以使用快捷键F12或者ctrl+shift+I；控制台左上角可切换PC端调试和移动端调试。如下图：
  
  2.2 微信的“web开发者工具”
  微信的web开发者工具，集成了谷歌的DevTools和weinre，可以说是上面两点的集合，对于那些微信公
  众号里面使用的H5网页，这个是最好的选择；这个工具调试一般性的网页就和谷歌浏览器调试一样，看到的调试面板也差不多；但是如果要调试微信相关的功能比如：JS-SDK，权限列表等就必须使用这个工具了。

  3.axios

  3.1 什么是axios
  Axios是一个基于promise的HTTP库，可以用在浏览器和 node.js中。
  3.2 特性

• 从浏览器中创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换 JSON 数据

• 客户端支持防御 XSRF
  3.3 安装
  npm install axios

  4.本地和会话存储

  4.1cookie
  HTTP Cookie简称cookie,在HTTP请求发送Set-Cookie HTTP头作为响应的一部分。通过name=value的形式存储
  cookie的构成：

• 名称：name(不区分大小写,但最好认为它是区分的)
• 值:value(通过URL编码:encodeURIComponent)
• 域
• 路径
• 失效时间:一般默认是浏览器关闭失效,可以自己设置失效时间
• 安全标志:设置安全标志后只有SSL连接的时候才发送到服务器
  cookie的作用:主要用于保存登录信息
  4.2基于 HTML5 规范的 Web Storage
  HTML5 提供了两种在客户端存储数据的新方法：
  （1）sessionStorage 会话存储
• 优点：临时，关闭页面标签自动回收，不同的两个标签页面的 sessionStorage 是不共享的
• 缺点：临时，因为是临时所以不能存储持久化的东西
  （2）localStorage 本地存储
• 优点：兼容性中等，几乎现代的浏览器都支持，没有过期时间限制，永久存储，永不失效，即只要
• 浏览器不卸载，数据就会一直存在，除非手动删除
• 缺点：存在大小限制，IE9,IE10 不支持