青训营笔记8.2——前端开发调试之 PC 端调试

Eren7Y琳
92 阅读2分钟

🎯课程表

📋前言

这是我参与「第五届青训营 」伴学笔记创作活动的第 15 天。

第五届字节跳动青训营的课程已经进入尾声了，继续保持上课的节奏和学习，需要要学习内容较多，因此分为几个部分来学习，今天的内容是继续学习前端开发调试之 PC 端调试的内容，通过该篇文章记录在课程中学到的知识以及重点，对此做相对应的笔记来巩固学习。

📑课程介绍

  • 在程序员的世界中，BUG 一词相信同学们再熟悉不过了，本节课将围绕前端开发中所遇见的 BUG 出发，讲解作为一名合格的前端开发人员，你应该掌握哪些开发调试知识。为了方便大家更好地知悉不同场景下 debug 方法，讲师将分为 PC 端与移动端展开解读，本节主要聚焦于 PC 端调试。

🔥课程重点

  1. Elements
  2. Console
  3. Source
  4. Performance
  5. Network

📝具体笔记

260e9634302dc511a9b5b4fe02a9bf8.png

918354600e2b94fd90965aa8f856a34.png 01.多平台 浏览器、Hybrid、NodeJs、小程序、桌面应用等

03.多工具 Chrome devTools、Charles、Spy-Debugger.Whistle、vConsole

02.多环境 本地开发环境、线上环境

04.多技巧 Console、BreakPoint、sourceMap、代理等

Elements

image.png

Console

08b8a26d8affa0ec4e59cdd057e73d2.png

Score

8489ae137215bfeaae361ecc815a0dc.png

  • 使用关键字 debugger 或 代码预览区域的行号可以设置断点
  • 执行到断点处时代码暂停执行
  • 展开 Breakpoints 列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
  • 暂停状态下，鼠标 hover 变量可以查看变量的值
  • 在调试器 Watch 右侧点击 +可以添加对变量的监控，查看该变量的值

61873415fb05991bd6aafcf93162106.png

893f68a711981693ccfe78254b8285d.png

前端代码天生具有“开源”属性，出于安全考虑，上线之前 JavaScript 代码通常会被压缩，压缩后的代码只有一行，变量使用'a'、'b'等替换，整体变得不可阅读。那么压缩后的代码如何调试 呢?

e48f2c15b5144bcabbbbc01efdad349.png

174c91d0db37f3966316e40ea0b018e.png

fbfc57ec49b650275c46c2c611e3ef8.png

c2bc0e269ac11cab6591942e2b0303d.png

69429cb2a3c455dfe0328d02c832361.png

2d727e0d5205fa004b0ac9784be46e3.png

f2ba01417d86794937824ea2d9cea0c.png Largest Contentful Paint (LCP) : 最大内容绘制，测量加载性能。为了提供良好的用户体验，LCP 应在页面首次开始加载后的2.5秒内发生。

First Input Delay (FID) :首次输入延迟测量交互性。为了提供良好的用户体验，页面的 FID 应为100毫秒或更短。

Cumulative Lavout Shift (CLS) : 累积布后偏移，测量视觉稳定性。为了提供良好的用户体验，页面的 CLS 应保持在 0.1.或更少 ce5322af54538469222df221f12f8a5.png 文章仅为个人学习笔记，如有错误，欢迎指正。

avatar
文章
阅读
粉丝