细说网页开发者工具F12-前端开发利器二

2597553-a6aa2a50f2579c88.jpg
image

前言

写这篇文章是细说网页开发者工具F12 - 前端开发利器的第二篇文章,若觉得不错请关注作者。

F12之Console

就是位于Elemnets右边的,打开后你会发现什么都没有


2597553-307b5079b406eaca.jpg
image

我们试着进入到友链页面,发现console面板出现了一些警告。这是因为在https域名下使用http的资源引起的警告。


2597553-aa51ef56ad0d69a8.jpg
image

为了更好的示范,我们这里新建一个html文件,代码如下
2597553-9be5e9d234a7321a.jpg
image

我们可以看出js的console.log方法可以在console面板输出内容


2597553-de04a25a781746f7.jpg
image

这里我们尝试书写错误的语法,console面板会报错,显示错误信息以及错误所在的行号
2597553-65d8f848c678bad1.jpg
image

我们还可以直接在console面板直接编写我们的js代码。
2597553-fb811994846d8380.jpg
image

在百度首页打开console面板还可以看见百度的招聘信息。

F12之Sources

2597553-c224c302c069a1a6.jpg
image

Sources面板下可以看到网页加载的各种资源,这里我们看到除了本域名下的资源,还加载了百度的统计,还有新浪微博的相册。
通过这个面板我们可以管理网站是否有用到其他网站的资源

未完待续......Continued......

猜你喜欢

转载自blog.csdn.net/weixin_34415923/article/details/87234323