金沙国际官网_金沙国际平台登录

因为这个金沙国际官网_金沙国际平台登录网站与很多的大型澳门赌场都有合作,金沙国际官网_金沙国际平台登录尽职尽责,高效执行,保持好奇心,不断学习,追求卓越,点击进入金沙国际官网_金沙国际平台登录马上体验吧,所以现在也正式地开始了营业。

您的位置:金沙国际官网 > web前端 > 5分钟从入门到精通,Chrome开发者工具不完全指南

5分钟从入门到精通,Chrome开发者工具不完全指南

发布时间:2019-10-25 15:33编辑:web前端浏览(166)

    Chrome开发者工具不完全指南(一、基础功能篇)

    2015/06/23 · HTML5 · 2 评论 · Chrome

    原文出处: 卖烧烤夫斯基   

    就算你不是一名前端开发工程师,相信你也不会对Chrome浏览器感到陌生。根据最新的一份(2015/06)的浏览器市场占有率报告,Chrome近乎占有浏览器天下的半壁江山。简单、快捷使它成为了新时代人们的新宠。如果你是一名web开发人员,我推荐你使用Chrome。作为前端开发的”IDE”,你只需要搭配一个编辑器就能完成几乎所有的开发任务了。关于它的使用和功能分析要么都是大而不全,要么是巨细糜烦。本系会比较详细地分享卤煮的一些Chrome(F12开发者功能)使用经验,从一些基础的功能开始到它的一些高级性能分析器(Timeline、Profiles),在最后,将会推荐几款好的插件,希望对您的开发工作有些许的作用。如果你对一些面板模块功能已经很了解可以直接跳过去阅读你感兴趣的部分。

    一、Elements
    图片 1
    在Element中主要分两块大的部分
    A:HTML结构面板
    B:操作dom样式、结构、时间的显示面板
    1.在A中,每当你的鼠标移动到任何一个元素上,对应的html视图中会给该元素蓝色的背景。
    图片 2
    2.如果你单击选中一个元素,在A部分的底部,会显示该元素在html结构中的位置关系
    图片 3
    3.然后你可以在B部分的styles选项中编辑该元素的样式,并且看到html结构的实时更新(大大的福利)
    图片 4
    4.你可以在B界面中切换到Event Listeners选项,观察该元素绑定的事件。
    图片 5

    click 是事件名称

    .div1 事件是索引名称(也就是通过什么绑定的)

    attachment 事件来源

    handler里面包含事件的毁掉主体内容

    useCapture表示该事件是否向上冒泡
    5.选中一个元素,右击鼠标,你会看到有一个弹出窗口出现,里面有若干选项
    图片 6
    Add attribut : 为该元素添加属性
    Edit attribute:修改该元素的属性
    Force element state: 为元素激活某种状态(主要用在可以几乎的元素比如a、input、button等)
    Edit as HTML:编辑该元素(你可以重写它的整个content)甚至修改它的标签名称
    中间简单的掠过…….
    Break on:为该元素添加dom操作事件监听。包含三个选项(树结构改变、属性改变、节点移除)。这个选项的作用是帮助我们监控和定位操作元素的代码。请参看下图事例:
    图片 7
    6.在A界面的弹出选项窗口中选择node removal,在B界面切换到DOM Breakpoints 选项,可以看到有注册信息。然后我们点击click me按钮触发删除div3的事件,可以看到浏览器自动为我们定位删除该元素的代码部分,并且停止执行js代码:
    图片 8

     

    7.在B界面中切换到Properties选项,可以看到选中元素的各种信息(英文单词里面的介绍比较简单,就不一一介绍了)。

    图片 9

     

    8.点击A界面的任意地方,按快捷键ctrl+F可以看到底部有输入框,在输入框中输入你想要查找的任何内容,如果匹配到了,都回在A面板中高亮显示
    图片 10
    9.或者你可以点击左上角的问号图标,然后把鼠标移动到视图界面中,对准元素按下鼠标左键,对应的A界面会定位到选择的元素。
    图片 11

     

     

    二、Network
    图片 12
    1.Network是一个监控当前网页所有的http请求的面版,它主体部分展示的是每个http请求,每个字段表示着该请求的不同属性和状态
    图片 13
    Name:请求文件名称
    Method:方法(常见的是get post)
    Status:请求完成的状态
    Type:请求的类型
    Initiator:请求源也就是说该链接通过什么发送(常见的是Parser、Script)
    Size:下载文件或者请求占的资源大小
    Time:请求或下载的时间
    Timeline:该链接在发送过程中的时间状态轴(我们可以把鼠标移动到这些红红绿绿的时间轴上,对应的会有它的详细信息:开始下载时间,等待加载时间,自身下载耗时)
    图片 14
    2.单击面板中的任意一条http信息,会在底部弹出一个新的面板,其中记录了该条http请求的详细参数header(表头信息、返回信息、请求基本状态—请参看http1.1协议内容对号入座)、Preview(返回的格式化转移后文本信息)、response(转移之前的原始信息)、Cookies(该请求带的cookies)、Timing(请求时间变化)
    图片 15
    3.在主面板的顶部,有一些按钮从左到右它们的功能分别是:是否启用继续http监控(默认高亮选中过)、清空主面板中的http信息、是否启用过滤信息选项(启用后可以对http信息进行筛选)、列出多种属性、只列出name和time属性、preserve log(目前不清楚啥用)、Dishable cahe(禁用缓存,所有的304返回会和fromm cahe都回变成正常的请求忽视cache conctrol 设定);
    图片 16
    4.最后在主面板的底部有记录了整体网络请求状态的一些基本信息
    图片 17

    三、Resources

    Resources部分较简单,他主要向我们展示了本界面所加载的资源列表。还有cookie和local storage 、SESSION 等本地存储信息,在这里,我们可以自由地修改、增加、删除本地存储。

    图片 18 至于webSql,我知道的并不多,在开发中很少用到。如果你想了解这方面的信息,我推荐你去阅读这篇博客

    1 赞 28 收藏 2 评论

    图片 19

    网页无图再不是梦想

    2015/08/22 · HTML5 · 1 评论 · 网页开发

    原文出处: 百码山庄   

    一直以来,网页开发对优化方面做的工作从未停止。网页无图也是为了减少页面资源请求而提出的一种畅想。无可厚非在网页开发的历程中在网页无图方面我们已经取得了不朽的成就:从一开始零零碎碎的小图标资源,到后来小图标合并成一个图片出现雪碧图,再到后来Webfont的出现不仅可以取代雪碧图,而且彻底解决了图标管理难,变色实现麻烦的问题。今天我要跟大家介绍一个小工具,也是可以帮助实现网页无图这一终极目标。理论上来讲,它可以将任何一张图片转换成一个不带图片,不带背景图的干干净净的html标签。但是这有前提:你的计算机得有足够的资源去支撑。

    WebSocket:5分钟从入门到精通

    2018/01/08 · HTML5 · 1 评论 · websocket

    原文出处: 程序猿小卡   

    缘起

    那是一个工作日的早上,我向往常一样准时到达了工作岗位上,启动电脑,打开浏览器我偶然发现了一篇名曰《18个你可能不相信是用CSS制作出来的东西》的文章,出于职业敏感,也出于好奇我就点进去看了一看,发现其中有一个很有意思的作品:,它仅仅用一个div标签就完成了这幅作品,于是我们几个同事好奇使然,开始分析它的实现,渐渐有了下面即将介绍的工具的影子。

    一、内容概览

    WebSocket的出现,使得浏览器具备了实时双向通信的能力。本文由浅入深,介绍了WebSocket如何建立连接、交换数据的细节,以及数据帧的格式。此外,还简要介绍了针对WebSocket的安全攻击,以及协议是如何抵御类似攻击的。

    渐入主题

    既然可以使用一个标签制作出一副精美的像素图,那么是否就意味着可以用一个标签还原任一一张图片?唯一不能还原的是图片的精细度问题。然而,如果可以精细到每一个像素点,那么高精度的还原整张图也完全可行,只是这必将消耗非常多的计算机资源。这一设想便是催生这个小工具的催化剂,于是我便开始构思起来。

    二、什么是WebSocket

    HTML5开始提供的一种浏览器与服务器进行全双工通讯的网络技术,属于应用层协议。它基于TCP传输协议,并复用HTTP的握手通道。

    对大部分web开发者来说,上面这段描述有点枯燥,其实只要记住几点:

    1. WebSocket可以在浏览器里使用
    2. 支持双向通信
    3. 使用很简单

    案例分析

    通过使用开发者工具分析以上案例的源码,我发现其实它的实现并不难。我们知道在CSS3中新增了一个设置盒子阴影的box-shadow属性,而这个属性可以同时设置任意多个不同颜色和扩散度的阴影块,而案例正是完美的诠释了这个新属性。

    既然如此,那么我们现在来做个试验,我们在任一一张图上覆盖上一个个大小相同的小方格子,我们就可以将任何一张图片分隔成一个个的小方格,我们只要知道这些小方格的大小、顺序和位置,我们就可以重组这张图片,如下对比图所示:

    图片 20

    但是,有个问题:box-shadow的引用颜色是单色的,而每个盒子范围内的图案是复杂的,我们如何去处理这个问题?

    因为box-shadow只能设置颜色,所以这个问题的结果只有一个,找出一个能代表这个格子的颜色,那么选取哪一个颜色值就因人而异了,可以选格子四角的任意一个、可选中心点,可选格子内的任意一个点,我选择的是格子的左上角这个点。我们不难发现,如果我们尽可能的缩小格子,小到只剩下一个像素大小,我们就可以完整的还原一张图片了。

    1、有哪些优点

    说到优点,这里的对比参照物是HTTP协议,概括地说就是:支持双向通信,更灵活,更高效,可扩展性更好。

    1. 支持双向通信,实时性更强。
    2. 更好的二进制支持。
    3. 较少的控制开销。连接创建后,ws客户端、服务端进行数据交换时,协议控制的数据包头部较小。在不包含头部的情况下,服务端到客户端的包头只有2~10字节(取决于数据包长度),客户端到服务端的的话,需要加上额外的4字节的掩码。而HTTP协议每次通信都需要携带完整的头部。
    4. 支持扩展。ws协议定义了扩展,用户可以扩展协议,或者实现自定义的子协议。(比如支持自定义压缩算法等)

    对于后面两点,没有研究过WebSocket协议规范的同学可能理解起来不够直观,但不影响对WebSocket的学习和使用。

    技术实现

    首先,我们考虑如何根据图片去取到每个格子的颜色值?这个问题并不难,HTML5为我们提供了Canvas标签,而通过Canvas我们可以使用getImageData方法获取到画布中任一一个点的颜色信息以及透明度信息。

    然后,我们来考虑如何设计我们的小工具。第一步,根据不同的图片可能会适合不同的格子大小,所以我会保留一个size选项用于设置盒子的大小;第二步,格子与格子之间是否保留间隙,可能根据用户习惯会有不同,所以我提供space选项来设置间隙大小;第三步,格子实际就是一个盒子的其中一个阴影,而阴影的形状是可以根据盒子本身发生变化的,所以我提供radius属性来配置格子圆角大小;最后,既然我们得到的将是一个html标签,那么标签是可以带有各种属性的(比如:id、class等),所以我提供一个attrs属性(一个json对象),来设置生成的html元素的属性。好了,万事俱备,只欠代码实现了!

    最后,我们梳理逻辑,封装代码,完成了最基础的版本。效果如下演示:

    图片 21

    为了方便大家看到更真实的效果,这里给大家提供在线DEMO

    2、需要学习哪些东西

    对网络应用层协议的学习来说,最重要的往往就是连接建立过程数据交换教程。当然,数据的格式是逃不掉的,因为它直接决定了协议本身的能力。好的数据格式能让协议更高效、扩展性更好。

    下文主要围绕下面几点展开:

    1. 如何建立连接
    2. 如何交换数据
    3. 数据帧格式
    4. 如何维持连接

    总结

    从功能上来看,我实现了图片到html元素的转换,但是可能并非是最好的网页无图实现方案,因为工具转换出的HTML标签,设置了太多的阴影块,对浏览器的渲染并不友好,会对用户计算机硬件有一定的要求,特别是块大小为1(即完整还原图片)的时候,转换过程非常缓慢,如果图片再大些,极有可能导致用户浏览器崩溃,因此建议大家测试时慎用大图做测试。而且,转换后得到的html标签和样式字符串大小将有可能远远超过图片本身的大小,所以我只能说这是一种可行的技术方案,但未必是好的实现方案。(然并卵)

    1 赞 4 收藏 1 评论

    图片 22

    三、入门例子

    在正式介绍协议细节前,先来看一个简单的例子,有个直观感受。例子包括了WebSocket服务端、WebSocket客户端(网页端)。完整代码可以在 这里 找到。

    这里服务端用了ws这个库。相比大家熟悉的socket.iows实现更轻量,更适合学习的目的。

    1、服务端

    代码如下,监听8080端口。当有新的连接请求到达时,打印日志,同时向客户端发送消息。当收到到来自客户端的消息时,同样打印日志。

    var app = require('express')(); var server = require('http').Server(app); var WebSocket = require('ws'); var wss = new WebSocket.Server({ port: 8080 }); wss.on('connection', function connection(ws) { console.log('server: receive connection.'); ws.on('message', function incoming(message) { console.log('server: received: %s', message); }); ws.send('world'); }); app.get('/', function (req, res) { res.sendfile(__dirname + '/index.html'); }); app.listen(3000);

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    var app = require('express')();
    var server = require('http').Server(app);
    var WebSocket = require('ws');
     
    var wss = new WebSocket.Server({ port: 8080 });
     
    wss.on('connection', function connection(ws) {
        console.log('server: receive connection.');
        
        ws.on('message', function incoming(message) {
            console.log('server: received: %s', message);
        });
     
        ws.send('world');
    });
     
    app.get('/', function (req, res) {
      res.sendfile(__dirname + '/index.html');
    });
     
    app.listen(3000);

    2、客户端

    代码如下,向8080端口发起WebSocket连接。连接建立后,打印日志,同时向服务端发送消息。接收到来自服务端的消息后,同样打印日志。

    1
     

    3、运行结果

    可分别查看服务端、客户端的日志,这里不展开。

    服务端输出:

    server: receive connection. server: received hello

    1
    2
    server: receive connection.
    server: received hello

    客户端输出:

    client: ws connection is open client: received world

    1
    2
    client: ws connection is open
    client: received world

    本文由金沙国际官网发布于web前端,转载请注明出处:5分钟从入门到精通,Chrome开发者工具不完全指南

    关键词: