Chrome开发者工具查看使用的protocol

最新推荐文章于 2024-05-15 09:54:36 发布
最新推荐文章于 2024-05-15 09:54:36 发布
阅读量7k 收藏 5
点赞数 21
分类专栏： 随笔 文章标签： Chrome 开发者工具
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Monster_ixx/article/details/89139438
版权

这个选项真的让我好找啊

想看页面使用了什么协议，无奈看别人博客开发者工具里都有protocol这个选项，然而本期缺没有，百度谷歌也搜不到，最后在知乎里看到了，决定写一篇博客记录一下。

一般我们使用ctrl+F12在network里看到的页面就是这样的
在这里插入图片描述
可以发现这里是没有protocol这个项目的

然后我们只要在在标签里右键，然后把protocol选项打开就可以看到使用到协议了
在这里插入图片描述
在这里插入图片描述

Monster_ixx
关注
  • 21
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
Chrome—— 浅谈谷歌F12开发者工具
剑来
03-13 1486
1、简介 按F12调出 右键检查（或快捷键Ctrl+Shift+i）调出 chrome开发者工具最常用的四个功能模块：元素（ELements）、控制台（Console）、源代码（Sources），网络（Network） 元素（Elements）： 用于查看或修改HTML元素的属性、CSS属性、监听事件、断点等。css可以即时修改，即时显示。 控制台（Console）：...
Chrome DevTools Protocol(谷歌开发者工具协议)Protocol Monitor（协议监视器）
llrraa2010的专栏
06-10 2637
该协议最初是由谷歌开发者工具团队维护的，负责调试、操作浏览器的协议。我们经常使用到的谷歌浏览器的开发者工具（快捷键 CTRL + SHIFT + I 或者 F12）就是使用这个协议来操作浏览器的。与 Selenium 需要与浏览器驱动进行交互不同的是，Chrome DevTools 协议直接通过​ Web Socket ​协议与浏览器暴露的 API 进行通信，这使得 Chrome DevTools 协议操作浏览器变得更快。我们要重启开发者工具，在右侧点击更多工具，这样就可以看到协议监视器面板了。
探索Web开发新维度：Devtools-Protocol
最新发布
gitblog_00001的博客
05-15 353
探索Web开发新维度：Devtools-Protocol 项目地址:https://gitcode.com/ChromeDevTools/devtools-protocol 项目介绍 在Web开发的世界中，Chrome DevTools Protocol（DTP）是连接开发者和浏览器内核的桥梁，它允许我们进行深度的调试、性能分析以及自动化测试。而devtools-protocol是一个官方维护的开...
在Chrome中怎样查看网站使用的protocol
liguangda的博客
01-10 946
正常情况下打开看到的样子，并没有protocol 右键点击Name这一行，会出现下面的选项，点击选择protocol即可
UEFI原理与编程（九）：UEFI中的Protocol使用方法
kaliopensourcextu
05-02 2万+
UEFI中的Protocol使用方法前言　　 启动服务提供了丰富的服务供开发者操作Protocol，我们可以使用Protocol也可以开发Protocol。本文主要介绍如何使用Protocol。
朋友们，一起学习下 Chrome DevTools Protocol。
z_l_x_的博客
10-18 3076
1947 年 9 月 9 日，First actual case of bug being found，自此引入了 Debugging。
Google Chrome 自定义协议（PROTOCOL）问题的处理
weixin_33953384的博客
06-22 4060
最近在使用谷歌浏览器的时候遇到了自定义协议（PROTOCOL）的问题，比较折腾，特此记录，希望我浪费生命换来的结果能够帮助读到此文的朋友少浪费一点宝贵的时间！ 由于某些原因，电脑里一直没有安装阿里旺旺，今天由于买一个东西需要和卖家沟通，就安装了一下。结果发现在网页上点击旺旺小图标不会打开旺旺软件，折腾正式开始！ 由于打开了很多网页，也没立即重启Chrome测试，好半天终于把所有的网...
CN-Chrome-DevTools:Chrome开发者工具中文手册
05-16
Chrome 开发者工具中文手册Chrome DevTools 是公认的优秀的前端调试工具，由于功能强大，所以使用起来有一定的学习门槛，与此同时 Chrome DevTools 暂时没有中文手册，对于不太熟悉英文的同学会比较吃力。...
gookies - Dump Chrome Cookie的工具.zip
07-18
2. **Chrome DevTools Protocol**: 这是Chrome浏览器提供的一种API，允许开发者通过JavaScript与浏览器的内核进行通信，进行调试、性能分析等操作。 3. **命令行工具**: gookies作为命令行工具，体现了CLI（Command ...
chrome扩展插件获取ajax请求记录
04-06
以"Network"面板为例，这是Chrome开发者工具的一个核心部分，它可以详细展示页面加载过程中的所有网络活动，包括Ajax请求。每条请求都包含请求方法（GET、POST等）、URL、状态码、响应时间、响应头和请求头等信息。...
chrome 调用exe
05-11
以下是使用URL Protocol Handler在Chrome中调用.exe文件的步骤： 1. **注册协议**：首先，你需要在Windows注册表中为你的应用程序注册一个新的URL协议。这通常涉及到创建新的键值对在`HKEY_CLASSES_ROOT`下，比如`...
PROTOCOL-STORM:TCP消息发送工具客户端
05-25
这个工具可能被网络开发者、系统管理员或者任何需要通过TCP协议传输数据的用户使用。TCP（传输控制协议）是互联网协议栈中最核心的部分之一，确保了数据的可靠传输。 描述中提到该工具是“基于node.js electron.js ...
简单介绍 javascript 中 __proto__ 属性的原理
劼哥舍
04-12 7726
简单来说，在 javascript 中每个对象都会有一个 __proto__ 属性，当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去 __proto__ 里找这个属性，这个 __proto__ 又会有自己的 __proto__，于是就这样一直找下去，也就是我们平时所说的原型链的概念。
Nginx配置HTTP2.0
denglei的博客
07-08 881
安装前必读： Nginx1.10.0以上版本才支持Http2.0 Http2.0只支持Https协议的网站，且openssl版本需要高于1.0.2 一、查看当前Nginx安装了哪些模块（其实目前Nginx版本都是大雨1.10的，所以都是有该模块的） # nginx -V 可以看到http2.0模块--with-http_v2_module已经存在了 二、配置nginx.conf Nginx配置http2很简单，只需要在listen的端口后新增http2标识即可，如下 server .
Network protocol总结
weixin_46218220的博客
11-14 973
一、协议分层 网络协议可以分为五层：物理层、数据链路层、网络层、传输层和应用层。 二、物理层 就是将电脑通过物理方式（光缆、电缆、双绞线、无线电等方法）连接起来，用于传输0和1的电信号。 三、数据链路层 此层主要是MAC地址，在子网络中进行广播发送数据包，在网络中的电脑，通过对比发送包中的MAC地址，来判断此包是否发送给自己，如果不是，则丢弃此包，否则将接收此包。 问题： 是否可以将美国和中国的电脑都分在一个子网络中，从而只通过MAC地址的方式进行连接？ 这几乎是不可能的，所以产生了一个新的协议，IP协议。
chrome等浏览器打开开发者工具（F12）之后在NetWork看不到请求头等信息
热门推荐
weixin_43273005的博客
04-14 5万+
开发者工具的network窗口能够查看浏览器的请求头以及响应头信息，但是有时打开开发者工具会遇到像下图这种情况 找不到请求信息，无法查看请求头，或响应头。 解决方法： 点击“Filter”按钮，也就是图中的漏斗形状的按钮。下面会多出一系列选项，如图 点击“All”，然后按“F5”刷新网页。之后在下方会出现资源文件，如图 然后在name一栏中点击资源文件，在右侧会弹出显示框，点击“Heade...
chrome url protocol 提示配置文件路径
dianjiong1915的博客
01-24 1183
%localappdata%\Google\Chrome\User Data\Default\Preferences 搜索对应的协议名，例如：{"x-github-client":false} 修改false为true则会重新提醒 参考： https://www.whidy.net/chrome-protocol-handler-settings-modify.html 转载于:ht...
网络协议（Network Protocol）
toyBrickBoy的博客
07-08 2986
网络协议（Network Protocol） 解释：计算机网络中进行 数据交换 而建立的规则、标准或约定的集合 例如：网络中一个微机用户和一个大型主机的操作员进行通信，由于这两个数据终端所用字符集不同，因此操作员所输入的命令彼此不认识。为了能进行通信，规定每个终端都要将各自字符集中的字符先变换为标准字符集的字符后，才进入网络传送，到达目的终端之后，再变换为该终端字符集的字符。当然...
为什么IE不提供__proto__？
smstong的成长轨迹
03-01 3040
每一个引用类型的实例中，都有一个指针，指向其原型对象。这个指针在非IE浏览器里通过__proto__表示，而在IE里不提供。 看如下代码： obj = {}; obj.__proto__.toString = function() { return "hello"; } test = {}; alert(test); 输出结果就是hello。原因在于JavaScript中只有一个Obj
开发者工具devtools的原理
09-04
### 回答1： DevTools（开发者工具）是一组工具，可以帮助开发者更轻松地构建、调试和优化网络应用程序。它们可以帮助开发者更快地识别和解决问题。DevTools还可以让开发者实现更多的功能，比如实时预览和检查网页布局，查看网络请求和资源，以及更快地调试 JavaScript 代码。 ### 回答2： 开发者工具（DevTools）是现代浏览器提供的一个功能强大的工具集，用于在开发和调试网页时进行查看、分析和修改。 DevTools的工作原理可以大致分为以下几个步骤： 1. 嵌入到浏览器中：开发者工具是以插件或扩展的形式嵌入到浏览器中的，提供给开发人员使用。用户可以通过浏览器的菜单或快捷键打开开发者工具。 2. 与浏览器建立通信：开发者工具与浏览器建立通信渠道，通过该通道获取当前页面的DOM结构、CSS样式和JavaScript运行情况等信息。 3. 查看页面结构：开发者工具中的“元素”面板可以显示当前页面的DOM结构，开发者可以在该面板中查看并编辑HTML标签、属性和样式。 4. 调试JavaScript代码：开发者工具中的“控制台”面板可以提供一个JavaScript的运行环境，开发者可以在该面板中编写和调试JavaScript代码，查看代码执行的结果和错误信息。 5. 分析网络请求：开发者工具中的“网络”面板可以查看当前页面发送的网络请求，包括请求的URL、请求方法、请求头和响应内容等信息，方便开发者分析页面加载和数据传输的性能问题。 6. 性能分析和优化：开发者工具中的“性能”面板可以用于分析页面的加载性能，并提供诸如JavaScript性能和内存使用情况的详细报告，帮助开发者进行优化。 7. 其他功能：开发者工具还提供了诸如查看和调试页面的样式、查找和替换文本、模拟设备和网络等功能，帮助开发者进行更全面和高效的调试和开发。 总之，开发者工具通过与浏览器建立通信渠道，获取并展示当前页面的各种信息，为开发者提供了丰富的调试和分析功能，帮助他们更好地开发和优化网页。 ### 回答3： 开发者工具（DevTools）是一种集成在浏览器中的工具，用于帮助开发人员在开发和调试网页时进行分析、监控和修改。DevTools的原理涉及以下几个方面。 首先，DevTools与浏览器紧密集成，可以直接访问浏览器中的内部数据结构和功能接口。通过与渲染引擎（如WebKit或Chromium）的通信，DevTools能够获取DOM树结构、CSS样式表、JavaScript堆栈信息等页面相关的数据信息。 其次，DevTools利用浏览器的调试接口（如Chrome的Chrome DevTools Protocol）与浏览器进行通信。这些接口提供了许多底层功能，例如获取网络请求的详细信息、监测性能指标、执行JavaScript代码、模拟用户行为等。DevTools可以通过发送命令和接收响应来与浏览器进行交互，以实现对页面的分析和修改。 还有一些与开发者工具密切相关的技术，例如断点调试和代码审查。开发者工具可以在页面中设置断点，当特定条件满足时，自动中断JavaScript的执行，并提供调试信息和堆栈跟踪，帮助开发人员定位问题。此外，开发者工具还提供了代码审查功能，用于分析和修改页面的HTML、CSS和JavaScript代码。 总之，开发者工具的原理是通过与浏览器内部通信，获取页面的各种数据信息，并提供操作界面和调试功能，以帮助开发人员进行网页开发和调试。开发者工具的实现依赖于浏览器的内部结构和接口，以及相关的调试和审查技术。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值