http（第二周）

http（第二周）：
搜f12调试

1.chrome調試工具快速入門：（目录）
1.1各个选项卡的使用（开发者工具顶部的不同选项卡提供了对不同功能的访问）
1.2命令菜单的使用
1.3CSS debug和js debug
1.4Network

2. 2.1
   。打开Dev Tool（2种）
   1.菜单-更多工具-开发者工具（f12或者ctrl+shift+l）（或者直接右键鼠标-检查）
   2.F12
   。打开命令菜单：（快捷键2种）
   1. ctrl+shift+p
   2. command+shift+p（MAC）（此处可以查找进行截图，一共有四种截图）
   。常用的Tab：
   1.Element
   。css调试，实时编辑和调试css样式。
   。Dom检查，查看和编辑Dom结构。
   2.Console
   。JavaScript调试，执行js代码和查看输出。
   3.Source
   。js调试器：设置断点和调试JavaScript。
   4.Network
   。网络请求监控：查看所有网络请求和响应。
   5.Vue/React
   2.2
   。Css调试：
   1.检查元素（直接在需要检查的位置右键检查）
   2.查找Dom树：
   。快捷键ctrl+f或者command+f（MAC）
   。查询方式：文本查询、css选择器、Xpath
   3.Console
   。inspect（element）
   4.使用步骤
   。打开开发者工具（f12或者右键检查）。
   。切换到elements面板
   。按ctrl+f（windows/linus）或Cmd+f（Mac）打开搜索框。
   。输入css选择器或xpath表达式。
   。使用enter键在匹配结果之间导航。

   2.3 编辑样式：
   。用auto-complete特性给元素添加样式。Auto-complete自动完成，根据用户输入提供建议选项。。
   。让：hover常驻（悬停！），在开发者工具中保持:hover状态以调试样式。（:hover等状态的持久化显示）
   。编辑class（允许用户直接编辑内容）
   1.可以改
   2.不能改
   3.
   。复制样式（复制样式-.cls后粘贴）
   。DevTool的黑色主题，切换开发者工具的明暗主题。
   。截图，对网页或特定元素进行截图。
   2.4 控制台Console
   。快捷键
   1.ctrl+shift+j
   2.command+option+j（MAC）
   。执行语句
   。$_ 上一条语句
   。$0 上一个选择的DOM节点（$1, $2...）
   。console.log (error warn clear group time table)
   。Log级别筛选
   2.5 JavaScript调试
   。变颜色
   。在vue里变颜色
   2.6 Network
   。发送请求
   。

3.一、简介

浏览器自带的一个开发调试工具。

特点：1.简单轻量级，是浏览器内置的开发者工具来提供捕获浏览器的数据报文的功能。

2.F12作为浏览器的一部分，是数据收发的一端，抓取到的HTTPs报文是可以得到明文数据的。

二、打开Dev Tools

1.菜单>更多工具>开发者工具

2.快捷键：F12

3.Ctrl+Shift+I

4.页面右键【检查】

三、打开命令菜单

Windows系统：Ctrl+Shift+P

四、常用的选项卡

Elements（元素）

Console（控制台）

Sources（源代码/来源）

Network（网络）

五、常规设置

1.显示的位置调整

2.设置语言和颜色

3.手机版本的切换

六、常用命令

主题（深色、浅色）

截图（4种）以TB为例

七、元素

1.检查元素

右键--【检查】

区域颜色：蓝色、绿色、橙色

2.查找DOM树

Ctrl+F

例如：section

section#section_one

//section/p

//全局找

/下一层节点

八、工作台

也可以在这里查找节点inspect命令

inspect(document.getElementById('section_seven'))可以直接定位到

九、复制样式

1.查找节点

2.右键【复制样式】

3.目标位置，Ctrl+V

六、Network网络

（重点）主要用于进行测试问题的定位与分析，这个部分记录了前后端的交互。

前端和后端信息通过接口传输，Network记录了接口信息

HTTP请求信息：

HTTP响应信息：

抓到的报文分析：状态、方法、域名、文件和类型、发起者、传输和大小

详细报文内容：消息头、cookies、请求、响应、耗时

保留日志（抓不到登录的post请求时，可以修改此处）

停用缓存

问题定位案例：通过抓包判断前端问题还是后端问题？

（一）前端问题

前端没有发送请求

前端发送内容，数据错误

前端没有正确显示

（二）后端问题

后端没有给响应消息

后端响应消息，数据错误

配合数据库+后端日志才能精准判断问题所在