介绍一下主流的浏览器的开发者工具(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

目录
相关文章
|
21天前
|
JSON 移动开发 JavaScript
在浏览器执行js脚本的两种方式
【10月更文挑战第20天】本文介绍了在浏览器中执行HTTP请求的两种方式:`fetch`和`XMLHttpRequest`。`fetch`支持GET和POST请求,返回Promise对象,可以方便地处理异步操作。`XMLHttpRequest`则通过回调函数处理请求结果,适用于需要兼容旧浏览器的场景。文中还提供了具体的代码示例。
在浏览器执行js脚本的两种方式
|
19天前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
25天前
|
Web App开发 JavaScript 前端开发
使用 Chrome 浏览器的内存分析工具来检测 JavaScript 中的内存泄漏
【10月更文挑战第25天】利用 Chrome 浏览器的内存分析工具,可以较为准确地检测 JavaScript 中的内存泄漏问题,并帮助我们找出潜在的泄漏点,以便采取相应的解决措施。
150 9
|
23天前
|
存储 缓存 网络协议
计算机网络常见面试题(二):浏览器中输入URL返回页面过程、HTTP协议特点,GET、POST的区别,Cookie与Session
计算机网络常见面试题(二):浏览器中输入URL返回页面过程、HTTP协议特点、状态码、报文格式,GET、POST的区别,DNS的解析过程、数字证书、Cookie与Session,对称加密和非对称加密
|
1月前
|
域名解析 缓存 负载均衡
网络浏览器并输入地址到显示的整个过程
网络浏览器并输入地址到显示的整个过程
|
1月前
|
机器学习/深度学习 自然语言处理 前端开发
前端大模型入门:Transformer.js 和 Xenova-引领浏览器端的机器学习变革
除了调用API接口使用Transformer技术,你是否想过在浏览器中运行大模型?Xenova团队推出的Transformer.js,基于JavaScript,让开发者能在浏览器中本地加载和执行预训练模型,无需依赖服务器。该库利用WebAssembly和WebGPU技术,大幅提升性能,尤其适合隐私保护、离线应用和低延迟交互场景。无论是NLP任务还是实时文本生成,Transformer.js都提供了强大支持,成为构建浏览器AI应用的核心工具。
480 1
|
1月前
|
JavaScript API
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
126 0
|
1月前
|
JavaScript 前端开发 开发者
JavaScript 浏览器控制台的使用
JavaScript 浏览器控制台的使用
22 0
|
1月前
|
存储 JavaScript 前端开发
JavaScript 与浏览器存储
JavaScript 与浏览器存储
37 0
|
1月前
|
存储 资源调度 JavaScript
vue.js【网络请求和状态管理】
vue.js【网络请求和状态管理】
下一篇
无影云桌面