浏览器调试

一、浏览器调试概述

  • 通过控制台来检查代码的运行结果

二、打开控制台的方法

方式一、在页面直接f12
方式二、在页面右击鼠标点击检查即可(如下图)

undefined

图一

三、控制台介绍

一、Elements的作用(查找网页源代码HTML任一元素)

undefined

图三

二、Console的作用(记录开发过程中的显示的信息,输出打印日志)

undefined

图四

三、Sources的作用(断点调试js)

undefined

图五

四、Network的作用(分析HTTP请求后得到的各个请求资源信息包括状态、资源类型、大小可以根据这个进行网络性能优化)

undefined

图六

四、使用方法(演示案例)

  • 下图为案例
    undefined

    图二

    一、我们想修改样式就通过控制台找到我们要修改的class名,然后再前端函数里写对应修改的样式即可(如下图)

undefined

图七

二、控制台输出日志

通过JS代码或者命令行console.log()可以将日志信息输出到控制台

undefined

图八

三、通过debugger;可以进行调试(如下图)
  • 1、

    undefined

    图九

  • 2、在代码中打一个debugger;(可以看到代码每一步的执行,便于排查问题)

    undefined

    图十

四、从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息(包括状态、资源类型、大小、所用时间等),可以根据这个进行网络性能优化。

undefined

图十一

Copyright © 用友 -【生态技术部】 2021 all right reserved,powered by Gitbook修订时间: 2021-09-29 17:44:21

results matching ""

    No results matching ""