网站建设用什么教材,一个手机app开发需要多少钱,开装修公司就是等死,网站建设5iec了解网页基础(HTML、CSS、JavaScript)
了解HTTP基本原理
了解JSON格式
了解Ajax请求
了解爬虫基本原理
(一)、Chrome开发者工具面板概述 Elements
查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈。 比如我们在Event Listener…了解网页基础(HTML、CSS、JavaScript)
了解HTTP基本原理
了解JSON格式
了解Ajax请求
了解爬虫基本原理
(一)、Chrome开发者工具面板概述 Elements
查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈。 比如我们在Event Listeners中的mousedown中点击document然后点击出现的remove就可以移除鼠标控制了就可以开个小窗去听别的课了这样并不会被发现因为我们并没有通过向外发送任何数据。
Console
记录开发者开发过程中的日志信息且可以作为与JS进行交互的命令行Shell还可以当作JavascriptAPI查看比如我想查看console都有哪些方法和属性则可以直接在Console中输入”console”并执行。
Sources
断点调试JS以及查看网页源代码。
Network:
从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息包括状态、资源类型、大小、所用时间等可以根据这个进行网络性能优化关键是它对构建爬虫的请求至关重要
Timeline:
记录并分析在网站的生命周期内所发生的各类事件以此可以提高网页的运行时间的性能。
(Memory)Profiles:
如果你需要Timeline所能提供的更多信息时可以尝试一下Profiles,比如记录JS CPU执行时间细节、显示JS对象和相关的DOM节点的内存消耗、记录内存的分配细节。
Application:
记录网站加载的所有资源信息包括存储数据Local Storage、Session Storage、IndexedDB、Web SQL、Cookies、缓存数据、字体、图片、脚本、样式表等。
Security:
判断当前网页是否安全。
Audits:
对当前网页进行网络利用情况、网页性能方面的诊断并给出一些优化建议。比如列出所有没有用到的CSS文件等
Adblock:
广告拦截
(二)、详细介绍Network
概述
在爬虫中我们用解析库(requests或者urllib但不限于此两种)构造一个requests请求并且向网站所在的服务器发送网站服务器收到这个请求后进行处理和解析然后返回对应的响应。
而Network面板可以记录页面上的网络请求和所获得的响应的详情信息包括请求头中的Cookie、User-Agent状态码以及响应的类型且如果有的网页使用异步加载数据的方式时我们可以通过发送Ajax来获取数据我将介绍这两种获取方式。
介绍 标记【1】窗格
从写有标记【1】的窗格从左往右介绍
第一个红色记录按钮 处于打开状态时会在此面板进行网络连接的信息记录关闭后则不会记录清除按钮清除当前的网络连接记录信息点击一下就能清空过滤器 能够自定义筛选条件找到自己想要资源信息如下图所示 4.Preserve log表示是否保留日志当选择保留日志重新加载url当前界面时之前请求显示资源信息会被保留下来。
5.Disable cachez是否进行缓存开发者工具生效打开这个开关则页面资源不会存入缓存可以从下面的requests table窗格的initiator栏中中看资源从哪来的其中会显示从fron cache。
6.Offine Oline设置模拟限速设置限速可以模拟处于各种网络环境下的不同用户访问本页面的的情况。
标记【2】窗格
这个其实一栏筛选栏
比如XHR可以筛选出所有Ajax请求DOC是网页的源代码CSS装有整个网页样式规则(比如网页中文字大小颜色等)而javascript装有一些交互式效果比如下载进条度提示框等。
一起介绍标记【3】和【4】和【5】窗格了
如果我们不勾选任何一个它是这样的 如果我们勾选第一会发现requests table那的每一条记录都被加宽了 如果我们勾选Show overview那一栏会发现 显示时间流可根据时间查看对应时间下浏览器请求的资源信息。
如果我们勾选Capture一栏 它表示捕获屏幕点击摄像机按钮捕获屏幕重新加载页面即可捕获屏幕。
双击其中的截屏可以放大显示在放大的图下方可以点击跳转到上一帧或者下一帧。
单击则可以查看该帧被捕获时的网络请求信息并且在Overview上会有一条黄色竖线以标记该帧被捕获的具体时间点。
标记【7】窗格
DOMContentLoaded和load高亮显示。
DOMContentLoaded事件会在页面上DOM完全加载并解析完毕之后触发不会等待CSS、图片、子框架加载完成。
load事件会在页面上所有DOM、CSS、JS、图片完全加载完毕之后触发。
DOMContentLoaded事件在Overview上用一条蓝色竖线标记
load事件同样会在show Overview和Requests Table上用一条红色竖线标记 标记【6】窗格(着重介绍!!!)
Name/Pat资源名称以及URL路径 main.css
点击名称可以查看资源的详情情况包括Headers、Preview、Response、Cookies、Timing如图 重点介绍下Headers中的requests headers requests headers中的每个参数都会被介绍。
出自用两个简单爬虫来介绍ChromeF12 谷歌开发者工具 -Network - 知乎 (zhihu.com)
