【web】Chrome 浏览器中查看 webSocket 连接信息
1.以下代码实现一个webSocket连接，在文本输入框中输入内容，点击发送，通过服务器，返回相同的内容显示在下方。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>WebSocket</title>
6 </head>
7 <body>
8 <h1>Echo Test</h1>
9 <input type="text" id="sendTxt">
10 <button id="sendBtn">发送</button>
11 <div id="recv"></div>
12 <script type="text/javascript">
13 var websocket = new WebSocket("ws://echo.websocket.org/");
14 websocket.onopen = function(){
15 console.log("websocket open");
16 document.getElementById("recv").innerHTML = "Connected";
17 }
18 websocket.inclose = function(){
19 console.log('websocket close');
20 }
21 websocket.onmessage = function(e){
22 console.log(e.data);
23 document.getElementById("recv").innerHTML = e.data;
24 }
25 document.getElementById("sendBtn").onclick = function(){
26 var txt = document.getElementById("sendTxt").value;
27 websocket.send(txt);
28 }
29
30 </script>
31 </body>
32 </html>
下面通过Chrom浏览器开发者工具查看相关信息：
（1）点击Network，选中ws栏，注意选中Filter。
（2）刷新页面，可以看到一个ws连接。
（3）点击。
（4）也可以查看输入和发送的信息。
【web】Chrome 浏览器中查看 webSocket 连接信息的更多相关文章
- Chrome 浏览器中查看 webSocket 连接信息
1.以下代码实现一个webSocket连接,在文本输入框中输入内容,点击发送,通过服务器,返回相同的内容显示在下方. 1 <!DOCTYPE html> 2 <html lang ...
- Chrome_查看 webSocket 连接信息
1.以下代码实现一个webSocket连接,在文本输入框中输入内容,点击发送,通过服务器,返回相同的内容显示在下方. <!DOCTYPE html> <html lang=" ...
- 【Tip】如何在chrome浏览器中查看网页的Header
步骤:打开“开发者工具”,点Network标签,然后刷新网页,选择Name中的第一项,再点右边的Headers,就出来了. 似乎有点复杂,配合下面的图看就一目了然了.
- 查看 chrome 浏览器中的 Headers
查看 chrome 浏览器中的 Headers, Response 信息:
- [转]chrome浏览器中 F12 功能的简单介绍
本文转自:https://www.cnblogs.com/zhuzhubaoya/p/9758648.html chrome浏览器中 F12 功能的简单介绍 由于F12是前端开发人员的利器,所以我自己 ...
- 【F12】chrome浏览器中 F12 功能的简单介绍
chrome浏览器中 F12 功能的简单介绍 由于F12是前端开发人员的利器,所以我自己也在不断摸索中,查看一些博客和资料后,自己总结了一下来帮助自己理解和记忆,也希望能帮到有需要的小伙伴,嘿嘿! 首 ...
- chrome浏览器中 F12 功能的简单介绍
chrome浏览器中 F12 功能的简单介绍 由于F12是前端开发人员的利器,所以我自己也在不断摸索中,查看一些博客和资料后,自己总结了一下来帮助自己理解和记忆,也希望能帮到有需要的小伙伴,嘿嘿! 首 ...
- 渗透技巧——导出Chrome浏览器中保存的密码
0x00 前言 在后渗透阶段,获得权限后需要搜集目标系统的信息.信息越全面,越有助于进一步的渗透.对于Windows系统,用户浏览器往往包含有价值的信息. 在之前的文章<本地密码查看工具LaZa ...
- Google Chrome浏览器中如何使用命令
Google Chrome浏览器中如何使用命令 | 浏览:2974 | 更新:2014-02-23 23:12 | 标签:chrome 1 2 3 分步阅读 Google Chrome浏览器有很多的特 ...
随机推荐
- protobuf protocol-buffers 序列化数据 gobs pickling string XML 用C实现的cPickle比pickle快1000倍 protobuf2 protobuf3 差异
场景: 浏览器请求--->python数据生成--->python-生成excel--->浏览器下载excel 目标: 重构为 浏览器请求--->python数据生成---&g ...
- Mac中好用的快捷键
1.safari safariy页面刷新:Command+R,类似于Win系统里面的F5
- some code about numpy and notes about copy&broadcasting
import numpy as np np.__version__ #版本 #由于python的list不要求存储同样的类型,但是效率不高. L = [i for i in range(10)] L[ ...
- go os.State类用法
参考文章: https://blog.csdn.net/weixin_43851310/article/details/87988648
- 扩展方法和Enumerable
.NET中扩展方法和Enumerable(System.Linq) LINQ是我最喜欢的功能之一,程序中到处是data.Where(x=x>5).Select(x)等等的代码,她使代码看起来更好 ...
- [翻译向] 当flush privileges生效时
#前言: 最近频繁在mysql权限控制这里栽跟斗,在翻阅了一些资料之后,简单地翻译一下官网关于flush privileges的描述,抛砖引玉. #翻译正文: If the mysqld serv ...
- [转帖]年度网络攻击大调查：SSH端口最易受网络攻击，HTTPS其次！
年度网络攻击大调查:SSH端口最易受网络攻击,HTTPS其次! https://zhuanlan.kanxue.com/article-9431.htm 一般来说,人们会通过检查端口.更新设备等多种措 ...
- PS错误1
PS错误1 提示要卸载.不用卸载直接安装即可.还保留了之前的设置. 在安装目录下看看有没有安装PS的exe程序.可能有.
- Java基础---Java方法
基本方法的定义: public static void 方法名称() { 方法体 } 方法名称的命名规则和变量一样,使用小驼峰. 方法体:也就是大括号当中可以包含任意条语句. 注意事项: 1. 方法定 ...
- docker&git&gitlab-安装/部署/新建
--安装gcc yum -y install gcc --安装g++ yum -y install gcc-c++ --安装编译所需的包 yum -y install curl-devel expat ...