介绍一下主流的浏览器的开发者工具(js调试和查看网络请求)

简介: 介绍一下主流的浏览器的开发者工具(js调试和查看网络请求)

1、打开开发者工具:右键-->检查 (快捷键 f12)

2、开发者工具介绍:

(1):
网络异常,图片无法展示
|
选择页面的dom进行查看

(2):6.png设备适配

(3)元素:

① 可以查找到界面对应的dom;

② 通过计算样式,查看盒模型;

③ 在元素上选择右键,还可以:[当我们看到某个网站的css样式好好看式,嘿嘿,复制粘贴]


8.png


④ ctr+f: 查询,高亮提示


9.png


(4)样式:可以修改css然后实时查看效果:


10.png


样式的:hov 用来固定元素的状态


11.png


实时修改css (光标可以在css内随意移动,可以修改,也可以添加,也可以删除【去掉方框的√】)


12.png


样式的.cls 作用:结合image-20220115115415167  一起使用,在一群具有相同类选择器dom元素中查看具体某个dom元素啦的样式,然后可以删除或者添加该dom的类选择器


2282448-20220117111327664-1858845242.png


(5) 控制台:可以书写一些语句,查看执行效果

  • 控制台常用语句: <span style='color:blue';>console.log(); console.error();

2282448-20220115210354664-276522974.png

2282448-20220115210429516-199742239.png




(6)源码:有时候可能源码是进行压缩的,可以点击下面的
网络异常,图片无法展示
|
(可读模式),js源码的话,可以进行断点调试

■ js源码的断点调试:(记得按F5进行刷新,不然调试工具的菜单项都是灰色的)

打断点,然后监视变量
2282448-20220115210707693-1686092843.png:跳到下一个断点
2282448-20220115210747720-847862851.png: 跳过下一个函数的调用
2282448-20220115212435262-446517225.png:进入下一个函数的调用
2282448-20220115210827147-266081505.png:跳出当前函数
2282448-20220115210856943-15191944.png: 单步调试


image.png



■ 当代码调试进入到官网的代码(没有问题的代码时): 点击 调用堆栈 -》右键 -》 向忽略列表添加脚本


■ dom 调试:

  • 右键-》发生中断条件 -》例如选择 属性修改

image.png


点击 DOM断点观察


image.png


(7)网络【按F5进行刷新】:

1、简单介绍:

  • 对文件类型进行选择:

2282448-20220115211358647-634715103.png


  • 2282448-20220115211428971-333604829.png: 是否监听网络请求
  • 2282448-20220115211456404-2056899801.png: 清空监听的网络请求
  • 网络节流:模拟在各种网络下的网速情况

2282448-20220115211544763-1300629385.png


更多网络设置:


2282448-20220115211613125-962034144.png


2282448-20220115211642445-1961632977.png


□ 设置用户代理作用:可以模拟用户使用的浏览器,检测自己的代码是否可以在特定浏览器下正常运行
  • 2282448-20220115211709457-1370991963.png: 当用户碰到麻烦了,可以让用户导出请求的相关信息,然后将该.har 文件发给我们导入查看



❀ 2、实际查看网络的例子:如何判断请求是否发送成功以及获取请求中的数据

一、如何判断请求是否发送成功

(这里咱以axios为例)

//获取按钮
 const btns = document.querySelectorAll('button');
 btns[1].onclick = function (){
    //调用axios方法(返回值是一个Promise对象),发送AJAx请求
    axios({
        //请求类型
        method: 'POST',
        //URL
        url:'http://localhost:3000/posts',
        //设置请求体(即数据)
        data:{
            body: 'somoeone like me',
            postId: 2
        }
    }).then(response => {//请求成功后,获取请求中的数据
        console.log(response)
    })
};


(1)打开network,先查看请求码


2282448-20220115211840416-1300880834.png


(2)查看请求行请求体
  • 查看请求行:请求方式、请求参数、请求协议
  • 查看请求体:传输的数据

2282448-20220121201538205-234939126.png




■ 在Request Headers 默认看到的仅有请求头,点击一下view source,就可以看到请求行和(请求方式、请求路径、协议下面)请求头

□ 当请求方式是get时,请求体拼接在请求路径url上

□ 当请求方式是post时,请求体Payload


■ 同样,在Response Headers 默认看到的仅有响应头,点击一下view source,就可以看到响应行和(协议、响应状态码下面)响应头

□ 想看响应体,直接点击Response


二、获取请求中的数据

(这里咱依然是以axios为例,axios请求成功有一个then方法,调用then方法,打印一下请求的数据)

2282448-20220115211956508-2039355577.png

目录
相关文章
|
2天前
|
JSON 移动开发 JavaScript
在浏览器执行js脚本的两种方式
【10月更文挑战第20天】本文介绍了在浏览器中执行HTTP请求的两种方式:`fetch`和`XMLHttpRequest`。`fetch`支持GET和POST请求,返回Promise对象,可以方便地处理异步操作。`XMLHttpRequest`则通过回调函数处理请求结果,适用于需要兼容旧浏览器的场景。文中还提供了具体的代码示例。
在浏览器执行js脚本的两种方式
|
3月前
|
JavaScript 算法 前端开发
采招网JS逆向:基于AES解密网络数据
采招网JS逆向:基于AES解密网络数据
56 0
|
6天前
|
数据采集 JavaScript 前端开发
JavaScript重定向对网络爬虫的影响及处理
JavaScript重定向对网络爬虫的影响及处理
|
30天前
|
机器学习/深度学习 自然语言处理 前端开发
前端大模型入门:Transformer.js 和 Xenova-引领浏览器端的机器学习变革
除了调用API接口使用Transformer技术,你是否想过在浏览器中运行大模型?Xenova团队推出的Transformer.js,基于JavaScript,让开发者能在浏览器中本地加载和执行预训练模型,无需依赖服务器。该库利用WebAssembly和WebGPU技术,大幅提升性能,尤其适合隐私保护、离线应用和低延迟交互场景。无论是NLP任务还是实时文本生成,Transformer.js都提供了强大支持,成为构建浏览器AI应用的核心工具。
312 1
|
19天前
|
JavaScript API
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
45 0
|
2月前
|
JavaScript 前端开发
js之浏览器对象|28
js之浏览器对象|28
|
23天前
|
存储 资源调度 JavaScript
vue.js【网络请求和状态管理】
vue.js【网络请求和状态管理】
|
3月前
|
机器学习/深度学习 存储 前端开发
实战揭秘:如何借助TensorFlow.js的强大力量,轻松将高效能的机器学习模型无缝集成到Web浏览器中,从而打造智能化的前端应用并优化用户体验
【8月更文挑战第31天】将机器学习模型集成到Web应用中,可让用户在浏览器内体验智能化功能。TensorFlow.js作为在客户端浏览器中运行的库,提供了强大支持。本文通过问答形式详细介绍如何使用TensorFlow.js将机器学习模型带入Web浏览器,并通过具体示例代码展示最佳实践。首先,需在HTML文件中引入TensorFlow.js库;接着,可通过加载预训练模型如MobileNet实现图像分类;然后,编写代码处理图像识别并显示结果;此外,还介绍了如何训练自定义模型及优化模型性能的方法,包括模型量化、剪枝和压缩等。
49 1
|
3月前
|
编解码 JavaScript 前端开发
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
93 1
|
3月前
|
JavaScript 前端开发 开发者
Chrom devtools JS调试、性能优化与必备功能
Chrom devtools JS调试、性能优化与必备功能