前端调试和网络技术基础 学习笔记

最新推荐文章于 2024-07-25 09:24:40 发布
最新推荐文章于 2024-07-25 09:24:40 发布
阅读量4.3k 收藏 1
点赞数
分类专栏： web前端开发 文章标签： javascript css3 前端 http 网络安全
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43102225/article/details/123756939
版权

前端调试和网络技术基础 学习笔记

1、 前端调试

前端调试主要有以下三个方面：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aJ0yqiOU-1648279909599)(C:\Users\86180\AppData\Roaming\Typora\typora-user-images\image-20220325160825150.png)]

1.1、网页调试

Elements

  • 查看页面元素当前生效的样式与继承来、计算后的样式
  • 查看浏览器原生组件的格式
  • 神奇的拷贝
    • 拷贝html片段
    • 拷贝JS选择器
    • 拷贝样式
    • 拷贝xpath
  • 神奇的自动补写与提示
  • 状态模拟

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G25DkZyC-1648279909601)(C:\Users\86180\AppData\Roaming\Typora\typora-user-images\image-20220325161856907.png)]

可以查看hover时的设置

  • 优秀的颜色选择器、shadow选择器、animation选择器与快捷插入

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DHMFFbOz-1648279909601)(C:\Users\86180\AppData\Roaming\Typora\typora-user-images\image-20220325162104884.png)]

可以自行选择颜色、动画等功能

  • 搜索
    • 可以搜索文本、样式，甚至元素
    • 可以搜索计算后的样式、快速定位
  • 已绑定事件

1.2、Console

  • console 方法
    • console.log 多参数
    • consloe.info,consoloe.info,console.warm多语义输出
    • console.table 格式化输出
    • console.time,console.timeEnd计时函数
    • console.assert断言函数
    • console.clear 清空控制台
    • 更多内容参考文档
  • 快捷函数与变量
    • $0-$4 之前选择过的元素
    • $() document.querySelector $()() document.querySelectorAll $x() 查找xpath
    • $_ 控制台上次执行的值
    • clear()
    • debug()
    • getEventListeners
    • keys/values
    • monitor/unmonitor 监听函数执行
    • monitorEvent/unmonitorEven 监听事件
  • 其他
    • 日志过滤
    • 运行环境选择
    • 日志保留
    • 运行时建议

1.3、Source

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HNgWWYGN-1648279909602)(C:\Users\86180\AppData\Roaming\Typora\typora-user-images\image-20220325165718419.png)]

  • 脚步调试
    • 断点
    • 条件断点、日志断点
    • XHP断点
    • DOM断点
    • 事件触发断点
  • 本地在线开发，实时存储
  • 线上环境轻松debug
  • 收藏自己的魔术脚本
    • 使用snippets,新建一些简短的魔术脚本，往往事半功倍
  • 覆盖率、CSS overview
  • 调试hover态
  • 搜索与全局搜索

1.4、 Network

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WWkny9lb-1648279909603)(C:\Users\86180\AppData\Roaming\Typora\typora-user-images\image-20220325170706507.png)]

  • 查看页面资源加载的瀑布流、请求头、响应头等信息
  • 加载进度截屏
  • 分类查看与搜索
  • 更强大的搜索功能
  • 查看请求的发起方
  • 强大的拷贝、网络重放
  • 环境模拟

1.5、 Application

在这里插入图片描述

  • LocalStorage、SessionStorage
  • Cookie
  • 后台应用
  • 快捷清除

1.6、模拟与仿真

  • 设备模拟

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bYdG485z-1648279909604)(C:\Users\86180\AppData\Roaming\Typora\typora-user-images\image-20220326140209973.png)]

    • 内置、新增UA
    • 多宽度测试
    • 网速模拟
    • 屏幕旋转

  • 网速、CPU模拟

在这里插入图片描述

  • 限制网速、模拟满网络、无网络、接口无法正常请求的情况

  • 限制CPU运算速率

  • 地理位置模拟

在这里插入图片描述

  • 篡改定位api

  • 媒体查询模拟

    • 系统配色模式-rendering
    • 当前设备类型-rendering

1.7、移动真机测试

  • 安卓浏览器： chrome://inspect/#devices
  • IOS Safari :OSX safari
  • Fiddler,Charles
  • vConsole

1.8、本地审查网络性能

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-I6OVRX8v-1648279909605)(C:\Users\86180\AppData\Roaming\Typora\typora-user-images\image-20220326141159044.png)]

1.8.1 性能指标
  • FP：first paint 首次绘制
  • FCP: first contentful paint 首次内容绘制
  • FMP: firts meaningful paint 首次有效绘制
  • LCP: largest contentful paint 最大内容绘制
  • DCL:DomContentloaded 该事件触发
  • L：onlLoad 该事件触发

1.9、实时监控网页性能和报错

  • 错误收集
  • 性能数据收集

performance.getentries()

performance.timing

1.10、部署位置

  • 性能分析脚本尽可能地最后执行，避免影响业务
  • 错误监控的实现方式是监听window.oneerror事件，因此需要放在页面头部来保证事件及时绑定

2、网络技术基础

2.1 URL

uniform resource locator

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-J44rOs8h-1648279909605)(C:\Users\86180\AppData\Roaming\Typora\typora-user-images\image-20220326143241875.png)]

http://:/ ?

  • 协议部分 protocol
  • 主机 host
  • 端口号 port 默认为80
  • 路径 path
  • 参数 search
  • 哈希 hash 锚点

常见应用：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-N3k7wXj1-1648279909606)(C:\Users\86180\AppData\Roaming\Typora\typora-user-images\image-20220326143638915.png)]

2.2 HTTP协议

HTTP协议是以ASCII码传输，建立在TCP/TP协议之上的应用层规范

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FHtsiWR1-1648279909606)(C:\Users\86180\AppData\Roaming\Typora\typora-user-images\image-20220326143937794.png)]

方法(method)

methodHTTP标准含义
GET1.0及以上获取URL指定的信息
POST1.0及以上从客户端向服务端发送数据
HEAD1.0及以上和GET基本相同，不过只返回消息头，不返回消息
OPTIONS1.1用于通知或查询通信选项
PUT1.1替换URL指定的服务器上的文件
DELETE1.1删除URL指定的服务器上的文件
TRACE1.1将服务器收到的请求行和头部直接返回给客户端
CONNECT1.1使用代理传输加密消息时使用的方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DRPNVym4-1648279909607)(C:\Users\86180\AppData\Roaming\Typora\typora-user-images\image-20220326145211391.png)]

常见的HTTP相应状态码

状态码描述
101切换协议
200OK
301永久重定向
302临时重定向
304资源未修改，不返回实体内容
403服务器拒绝访问对应的资源
404服务器上无法找到资源
500内部服务器错误
503服务器出于超负载或正在停机维护

实体头的MIME类型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lHLFoZij-1648279909607)(C:\Users\86180\AppData\Roaming\Typora\typora-user-images\image-20220326145738413.png)]

请求头Cookie

网站为了辨别用户身份而存储在用户本地终端上的数据

Cookie安全策略

  • Path
  • Domain
  • Expires
  • Secure
  • HttpOnly
  • SameSite

2.3 DNS

为互联网上任何可用的网页服务器提供了方便人类理解的网址

设置域名IP

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uMvGUp6k-1648279909607)(C:\Users\86180\AppData\Roaming\Typora\typora-user-images\image-20220326151149498.png)]

根服务器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-giA6lbyc-1648279909608)(C:\Users\86180\AppData\Roaming\Typora\typora-user-images\image-20220326151431975.png)]

2.4 TCP/IP

协议栈

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kq61K0eY-1648279909608)(C:\Users\86180\AppData\Roaming\Typora\typora-user-images\image-20220326152052946.png)]

套接字

  • 客户端IP地址
  • 客户端端口号
  • 服务器IP地址
  • 服务器端口号

2.5 TLS/SSL

HTTPS 默认端口443

HTTPS的优势

  • 身份验证
  • 数据完整性
  • 保密性

混合内容

  • 被动混合内容 img video audio
  • 主动混合内容 script link 等

学习网址:https://www.xuetangx.com/learn/THU08091000257/THU08091000257/10322315/video/17397692?channel=i.area.recent_search

skyoung13
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端新人必看的开发技巧之浏览器控制台
JKR10000的博客
08-17 2705
随便进入一个网页，按下F12，都将看到如下的控制台 一、快速定位深层元素 二、移动端调试 在浏览器也能很好的模拟移动端的效果，可以切换不同的机型与大小 三、css调试 标签大小 可通过右下角的矩形图可以直观看出，当前标签的width、height、padding、margin、position的大小（如果有的话，否则属性是auto或-） 属性来源查看 当一个标签被多个类修饰，我们也能看出究竟那些熟悉生效了，特别是有熟悉冲突的时候 属性值调试 我们不一定要修改代码来改变css，可以直接在浏览器调.
我的前端资源学习笔记。。。
03-03
【前端资源学习笔记】 在前端开发领域，学习和掌握各种技术是至关重要的。这份笔记将带你深入了解前端开发的核心概念、工具和技术，助你成为一个全面的前端开发者。 1. HTML（超文本标记语言）：HTML是网页的基础...
前端调试接口技巧 更好的配合后端进行接口调试
weixin_45966674的博客
01-07 1851
首先是我们最常用的调试方式 但如果数据很多 无论是在这里看返回值 还是把返回值打印出来都很不方便 我们可以把接口地址复制出来然后粘贴到浏览器地址栏上就可以看到对应返回的json了 这里隆重推荐 FeHelper ( 浏览器插件 ) 在这个插件下 JSON数据会变得很清晰直观 我们可以更好的查看返回值 如果因为参数或者其他原因 导致接口 500等错误是 我们可以把接口地址复制给后端 然后在参数栏中点击查看数据源 把处理好的 参数格式发给后端 跟便于他们调试接口 还有就是控制用户权限的
【我不熟悉的javascript】使用console.clear()清除控制台
qq_17335549的博客
10-22 1861
【我不熟悉的javascript】使用console.clear()清除控制台
前端 控制台基础知识
weixin_44518466的博客
10-15 2648
一、控制台属性： 1.Elements：用来调试网页的HTML源码和CSS代码。 2.Resources：查看网页加载的各种资源文件（比如代码文件、字体文件、css文件等），以及在硬盘上创建的各种内容（比如本地缓存、Cookie、Local Storage等）。 3.Network：查看网页的HTTP通信情况。 4.Sources：调试JavaScript代码。 5.Timeline：查看各种网页行为随时间变化的情况。 6.Profiles：查看网页的性能情况，比如CPU和内存消耗。 7.Audits：提供
js清空浏览器控制台信息
菜菜鸟的博客
05-28 8858
思路： 主动清空控制台信息 重写console.log（）方法，使其不执行输出打印 方法一：clear（） console对象提供了clear方法 执行就行 console.clear() 注意：clear（）方法会在控制台打印一句 方法二：重写console.log（） 如下： (function (){ console.log= function(){} })() ...
web前端学习笔记以及代码
02-24
本压缩包“web前端学习笔记以及代码”显然包含了一套完整的前端学习资源，包括理论知识和实践代码，这对于初学者或者希望提升技能的开发者来说非常有价值。 首先，前端开发通常涵盖以下关键知识点： 1. HTML...
前端开发各种常用技术笔记
03-30
这份"前端开发各种常用技术笔记"涵盖了JavaScript、CSS、HTML、ES6、Vue.js、Vue Router、Vue Axios等关键知识点，以及JavaScript和CSS的常用方法，以及小程序开发的相关资源，是前端开发者巩固基础、提升技能的宝贵...
JavaScript 学习笔记之基础中的基础
12-12
这篇学习笔记将带你深入了解JavaScript的基础知识，包括它的组成、主要组成部分的作用，以及如何在HTML中使用`<script>`元素。 首先，JavaScript由三个主要部分组成： 1. **ECMAScript (ES)**：这是JavaScript的...
基于Java的网课学习笔记设计源码
05-31
4. **Web开发技术**：考虑到是网课学习笔记系统，项目可能使用了Servlet和JSP（JavaServer Pages）进行服务器端编程，或者Spring Boot框架来构建RESTful API，处理HTTP请求和响应。 5. **前端技术**：用户界面的...
浏览器console终端缓存清空
热门推荐
前端
06-26 1万+
使用浏览器的console，测试数据时总是遇到缓存问题，非常不方便 例如： 使用的鼠标右键 clear console 完全没起作用，只是清空了console的终端，刷新浏览器也没用，之前遇到过该问题，没找到方便的解决，所以每次只能 Ctrl+Shift +Delete 来清除console的终端缓存，再刷新，非常麻烦 发现一个快捷的方式，切换到Network页签 然后右键 clear bro...
前端调试必备技巧（控制台使用完全指南）
java、c++、机器学习方向King
06-27 1万+
http://www.w3cplus.com/tools/chrome-devtools-console.html?utm_source=tuicool&utm_medium=referral 了解如何：打开 DevTools 控制台；堆叠冗余消息或将其显示在各自的行上；清除或保留输出，或者将其保存到文件中；过滤输出，以及访问其他控制台设置。 打开控制台 以全屏模式的专用面板
前端接口测试
weixin_44520133的博客
04-08 4372
调用被测试的接口 返回的数据类型判断 返回的数据字段是否缺失 返回的数据字段内容判断
前端页面调接口调试
wsf0001的博客
12-25 2700
解决前端调试接口，跨域环境
GB511846886的博客
05-19 614
一、介绍 其实跨域是浏览器本身限制阻止的，为什么就是因为超级不安全 前端和后台调试接口时，最主要的麻烦就是跨域导致的，怎么解决，提供以下几种方法 二、方法 1、后端在接口文件写一段（这是最简单方法，但是） 1 // 指定允许其他域名访问 2 header('Access-Control-Allow-Origin:*'); 优点：对于前端来说十分之简...
fiddler网络调试神器（前端）——擦肩而过
Tseng
05-22 3705
转自：http://shalles.github.io/blog/tools/fiddler/2015/02/08/tools-fiddler-profile 08 February 2015 ##Web Debugging 支持基于windowsPC端windows、Mac、Linux系统，各种移动设备的通信调试且无浏览器限制（非pc windows只需多个设备与之在同一个网域下
前端技术-调试工具（上）
weixin_30649641的博客
05-16 1715
页面制作之调试工具 常用的调试工具有Chrome浏览器的调试工具，火狐浏览器的Firebug插件调试工具，IE的开发人员工具等。它们的功能与使用方法大致相似。Chrome浏览器简洁快速，功能强大这里主要介绍Chrome浏览器的调试工具。 打开 Google Chrome 浏览器，通过下面任何一种方式进入开发人员工具： -点击位于浏览器用户界面右上角的“页面”下拉菜单，“更多工具”→“开发人员工具...
【React 】开发环境搭建详细指南
lph159的博客
07-24 1245
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
最新发布
exlink2012的专栏
07-25 397
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
HTML5+CSS3+JS前端开发学习笔记
"这是一份综合性的Web前端学习资料，涵盖了HTML5、...这份学习笔记为初学者和进阶者提供了一个全面的Web前端学习平台，从基础知识到高级特性，从理论到实践，帮助读者掌握前端开发的核心技能，并了解HTML5带来的创新。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值