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

2022年01月16日 阅读数:2
这篇文章主要向大家介绍介绍一下主流的浏览器的开发者工具(js调试和查看网络请求),主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。


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

二、开发者工具介绍:

(1): 选择页面的dom进行查看

(2):设备适配

(3)元素:

① 能够查找到界面对应的dom;

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

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

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


(4)样式:能够修改css而后实时查看效果:


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


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


  • 样式的.cls 做用:结合image-20220115115415167 一块儿使用,在一群具备相同类选择器dom元素中查看具体某个dom元素啦的样式,而后能够删除或者添加该dom的类选择器


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

  • 控制台经常使用语句: console.log(); console.error();

(6)源码:有时候可能源码是进行压缩的,能够点击下面的 (可读模式),js源码的话,能够进行断点调试

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

打断点,而后监视变量
:跳到下一个断点
: 跳过下一个函数的调用
:进入下一个函数的调用
:跳出当前函数
: 单步调试
■ 当代码调试进入到官网的代码(没有问题的代码时): 点击 调用堆栈 -》右键 -》 向忽略列表添加脚本

■ dom 调试:

  • 右键-》发生中断条件 -》例如选择 属性修改
  • 点击 DOM断点观察

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

一、简单介绍:

  • 对文件类型进行选择:
  • : 是否监听网络请求
  • : 清空监听的网络请求
  • 网络节流:模拟在各类网络下的网速状况
  • 更多网络设置:
□ 设置用户代理做用:能够模拟用户使用的浏览器,检测本身的代码是否能够在特定浏览器下正常运行
  • : 当用户碰到麻烦了,能够让用户导出请求的相关信息,而后将该.har 文件发给咱们导入查看

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

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

(这里咱以axios为例)css

 //获取按钮
 const btns = document.querySelectorAll('button');
 btns[1].onclick = function (){
    //调用axios方法(返回值是一个Promise对象),发送AJAx请求
    axios({
        //请求类型
        method: 'POST',
        //URL
        url:'http://localhost:3000/posts',
        //设置请求体(即数据)
        data:{
            title: "money",
            author: "i want"
        }

    }).then(response => {//请求成功后,获取请求中的数据
        console.log(response)
    })
};
(1)打开network,先查看请求码
(2)查看请求头和请求体
  • 查看请求方式、请求参数、请求协议
  • 请求实体(传输的数据)

2、获取请求中的数据

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