我从别人那里偷学的前端调试小技巧(浏览器篇)

发现光,欣赏光,学习光

每个人身上都有着不同的闪光点,把焦点凝结在缺点上只会让互相难过。转移焦点,放在他的优点上,你会发现,唔还不错。而且,你还可以学习它,让你变得更棒。(我越来越擅长写鸡汤了???????)

我从别人那里偷学的前端小技巧

  • Elements
  • Console
  • Sources
  • Network
    • Headers

首先F12 打开调试窗口
开发者工具,不同电脑可能快捷键不同

Elements

1 Elements可以看最终生成的html
(1)点击界面的任意部分可以选
(2)可以切换界面展示效果
我从别人那里偷学的前端调试小技巧(浏览器篇)_第1张图片
(3)Elements右侧可以修改css效果,并实时的显示在界面上,可以修改好后,再修改本地的css我从别人那里偷学的前端调试小技巧(浏览器篇)_第2张图片

Console

这里可以看到console.log的输出(这个应该都用过吧~)

Sources

这里可以给页面打断点
我从别人那里偷学的前端调试小技巧(浏览器篇)_第3张图片

Network

这里可以看到你请求的链接
我从别人那里偷学的前端调试小技巧(浏览器篇)_第4张图片
接下来,我点开任意一个链接,详细介绍下

Headers

1 General
(1)Request URL:请求的url
(2)Request Method:请求方法
(3)Status Code:响应的状态
(4)Remote Address:远程地址
(5)Reffer Policy:不知道欸,以后再补充
我从别人那里偷学的前端调试小技巧(浏览器篇)_第5张图片

2 Response Headers
注意一下content-type,有时候后端报错,可能是格式不对呢

我从别人那里偷学的前端调试小技巧(浏览器篇)_第6张图片3 Response
这里可以看到请求返回的信息,可能是json串,也可能是解析的页面(最接近原代码)
我从别人那里偷学的前端调试小技巧(浏览器篇)_第7张图片
恭喜你看完啦,更详细的以后遇到再补充,也欢迎你评论补充呐~
我从别人那里偷学的前端调试小技巧(浏览器篇)_第8张图片

你可能感兴趣的:(javascsript,html,javascript)