前端调试常识

BUG与Debug

榜首个BUG的发生

榜首个BUG能够追溯到1945年的9月
1945年9月9日，下午三点。哈珀中尉正领着她的小组结构一个称为“马克二型”的核算机。这还不是一个真实的电子核算机，它运用了许多的继电器，一种电子机械设备。第二次世界安全大战还没有完毕。哈珀的小组日以继夜地作业。机房是一间榜首次世界大战时建造的老修建。那是一个酷热的夏天，房间没有空调，悉数java面试题窗户都翻开散热。

忽然，马克二型死机了。技术人员试了许多办法，终究定位到第70号继电器犯错。哈珀调查这个犯错的继电器，发现一只飞蛾躺在中心，现已被继电器打死。她小心肠用摄子将蛾子夹出来，用透明胶布帖到“工作记载本”中，javascript并注明“榜首浏览器历史记录为何不能删个发现虫子的实例”。

从此以后，人们将核算机过错称为Bug，与之相对应，人们将发现Bug并加以纠正的进程叫做“D前端开发需求学什么ebug”，意即“捉虫子”或“杀虫子浏览器限制拜访网站”.

BUG是无法防止的

前端Debug的特色

1.多渠道

2.多环境

3.多东西

4.多技巧

chrome DevTools

动态修正元素和款式

Elments面板用于调试元素与安全教育款式

能够实时修正标签和款式

【青训营】- 前端开发调试

在Computed中能够看到终究收效的款式,以及其对应的CSS文件来历

【青训营】- 前端开发调试

  • 点击.cls敞开动态修正元素的class

  • 输入字符前端和后端的差异串能够动态地给元素添加类名

  • 勾选/吊销类名能够动态地查看类名收效作用

  • 点击具体的款式值(字号,色彩,宽度高度等)能够进行修正,浏览器内容区域实时预览

  • Computed下点击款式里的箭头能够跳转到style面板中的css规矩

    能够运用以下两种办法强制激活伪类

    • 选java模拟器择具有伪前端开发需求学什么类的Java元素,点击:hov
    • DOM树右键菜单,挑选Force State

【青训营】- 前端开发调试

【青训营】- 前端开发调试

Con字体美化大师sole日志面板

  • console.log
  • console.warn
  • console.error
  • console.debu前端训练组织g
  • console安全教育渠道.info

左边能够挑选等级,对日志进行分类查看

【青训营】- 前端开发调试

  • consolejava开发.table

具象化前端和后端的差异地展示JSON和数组数据

  • console.dir能够展示目标中的特色和对应的值

    let juejin = docume前端和后端的差异nt.getElementById('juejin');
undefi浏览器下载ned
console.dir(juejin);

【青训营】- 前端开发调试

  • 占位符

    给日志添加款式,能够突出重要的信息
    %s:字符占位符;%o:目浏览器哪个好标占位符;%c:款式占位符;java工作训练班%d;数字占位符

    举例

    console.log('%s %o,%c%s','hello',{name:'张三', age: 20}, 'font-size: 24px; color: red', 'he浏览器历史记录设置llo world!'java难学吗)

【青训营】- 前端开发调试

Sjava初学ource Tab

Break Poijava难学吗nt与 Watch

page对应着网站的目录资源,每个页面都有对应的代码

中心是挑选的文件的相关代码

右边是调试界面

在js文件对应方位加上debugger安全期核算器,程序实施到对应方位便进入调试

也能够直接在中心代码区域直接点击行号来添加断点

调试界面

watch能够对某一个变量的监听前端面试题

Breakpoints查看对应的断点

Scope与Call Stack

Scope作用域

Call Stack调用栈

紧缩后的代码怎样调试

前端代码天然生成具有”开源”特色,处于安全考虑,JavaScript代码一般会被紧缩,紧缩后的代码只要一行,变前端训练组织量运用a,b等替换,全体变得不行阅读.

那么紧缩后的代码怎样调试呢?

sou字体辨认rce map

打包时生成source map文件,可是不会上传到线上,

Performan前端开发需求学什么ce

和功用相关的面板

区域1:控制面板

区域2:概览面板

  • FPS:每秒帧数
  • CPU:处理各前端训练组织个任务花费的时刻
  • NET:各个央求花费的时刻

区域3:线程面板

  • Frames:帧线程
  • Main:主线程,担任实施JavaScript,解析H前端面试题TML/CSS,结束制作
  • Raster:Raster线程,担任结束某字体大全个layer或者某些块的制作.

区域4:核算面板

network

网站网络央求情况

【青训营】- 前端开发调试

Application

该面板主要是记载网站加载的悉数资源信息，包括存储数据（Local Storage、Sejava面试题ssion Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、款式表等

运用调试东西快java环境变量配置速截长图

【青训营】- 前端开发调试

移动端H5调试

真机调试

直接用数据线衔接设备

运用安全生产法署理东西调试

常用东西

Charles

Progress

Whistle