xml地图|网站地图|网站标签 [设为首页] [加入收藏]

正规赌博十大app排名

当前位置:网上十大正规赌博平台 > 正规赌博十大app排名 > Web性能优化系列网上十大正规赌博平台,HTML5中与

Web性能优化系列网上十大正规赌博平台,HTML5中与

来源:http://www.nb-machinery.com 作者:网上十大正规赌博平台 时间:2019-10-04 14:40

HTML5中与页面显示相关的API

2015/05/15 · HTML5 · HTML5

原文出处: 涂根华的博客   

在HTML5中,增加了2个与页面显示相关的API,分别是Page Visibility API与Fullscreen API; 作用分别如下:

Page Visibility API  是指当页面变为最小化状态或者用户将浏览器标签切换到其他标签时会触发。

Fullscreen API 是将页面整体或页面中某个局部区域设为全屏。

Page Visibility API的使用场合如下:

  1. 一个应用程序中具有多幅图片的幻灯片式的连续播放功能,当页面变为不可见状态(最小化状态或者将用户浏览器标签切换到其他标签时),图片停止播放,当页面变为可见状态时,图片继续播放。
  2. 在一个实时显示服务器端信息的应用程序中,当页面处于不可见状态(最小化状态或者将用户浏览器标签切换到其他标签时),停止定期向服务器端请求数据的处理,当页面变为可见状态,继续执行定期向服务器端请求数据的处理。
  3. 在一个具有播放视频功能的应用程序中,当页面处于不可见状态(最小化状态或者将用户浏览器标签切换到其他标签时),暂停播放视频,当页面变为可见状态时,继续播放视频。

浏览器支持程度:Firefox10 ,chrome14 ,IE10 ;

实现Page Visibility API

在使用Page Visibility API时,我们首先需要判断当前用户所使用的浏览器以及该浏览器是否支持。代码如下判断:

JavaScript

if(typeof document.hidden !== 'undefined') { hidden = 'hidden'; visibilityChange = 'visibilitychange'; }else if(typeof document.mozHidden !== 'undefined') { hidden = 'mozHidden'; visibilityChange = 'mozvisibilitychange'; }else if(typeof document.msHidden !== 'undefined') { hidden = 'msHidden'; visibilityChange = 'msvisibilitychange'; }else if(typeof document.webkitHidden !== 'undefined') { hidden = 'webkitHidden'; visibilityChange = 'webkitvisibilitychange'; }

1
2
3
4
5
6
7
8
9
10
11
12
13
if(typeof document.hidden !== 'undefined') {
    hidden = 'hidden';
    visibilityChange = 'visibilitychange';
}else if(typeof document.mozHidden !== 'undefined') {
    hidden = 'mozHidden';
    visibilityChange = 'mozvisibilitychange';
}else if(typeof document.msHidden !== 'undefined') {
    hidden = 'msHidden';
    visibilityChange = 'msvisibilitychange';
}else if(typeof document.webkitHidden !== 'undefined') {        
    hidden = 'webkitHidden';
    visibilityChange = 'webkitvisibilitychange';
}

如上,在Page Visibility  API中,可以通过document对象的hidden属性值来判断页面是否处于可见状态,当页面处于可见状态时属性值为false,当页面处于不可见状态时属性值为true。

在Page Visibility中,可以通过document对象的visibilityState属性值来判断页面的可见状态。该属性值为一个字符串,其含义如下所示:

    visible: 页面内容部分可见,当前页面位于用户正在查看的浏览器标签窗口中,且浏览器窗口未被最小化。

    hidden: 页面内容对用户不可见。当前页面不在用户正在查看的浏览器标签窗口中,或浏览器窗口已被最小化。

    prerender: 页面内容已被预渲染,但是对用户不可见。

现在我们来看一个demo,页面中有一个video元素与一个”播放”按钮,用户单击”播放”按钮时 按钮文字变为 ’暂停”,同时开始播放video元素的视频,当页面变为最小化状态或用户浏览器标签切换到其他标签时候,视频被暂停播放,当页面恢复正常状态或用户将浏览器标签切回页面所在标签时,视频继续播放。

HTML代码如下:

JavaScript

<video id="videoElement" controls width=640 height=360 autoplay> <source src="Wildlife/Wildlife.ogv" type='video/ogg; codecs="theora, vorbis"'/> <source src="Wildlife/Wildlife.webm" type='video/webm' > <source src="Wildlife/Wildlife.mp4" type='video/mp4'> </video> <button id="btnPlay" onclick="PlayOrPause()">播放</button> <div style="height:1500px;"></div>

1
2
3
4
5
6
7
<video id="videoElement" controls width=640 height=360 autoplay>
    <source src="Wildlife/Wildlife.ogv" type='video/ogg; codecs="theora, vorbis"'/>
    <source src="Wildlife/Wildlife.webm" type='video/webm' >
    <source src="Wildlife/Wildlife.mp4" type='video/mp4'>
</video>
<button id="btnPlay" onclick="PlayOrPause()">播放</button>
<div style="height:1500px;"></div>

JS代码如下:

JavaScript

var hidden, visibilityChange, videoElement; if(typeof document.hidden !== 'undefined') { hidden = 'hidden'; visibilityChange = 'visibilitychange'; }else if(typeof document.mozHidden !== 'undefined') { hidden = 'mozHidden'; visibilityChange = 'mozvisibilitychange'; }else if(typeof document.msHidden !== 'undefined') { hidden = 'msHidden'; visibilityChange = 'msvisibilitychange'; }else if(typeof document.webkitHidden !== 'undefined') { hidden = 'webkitHidden'; visibilityChange = 'webkitvisibilitychange'; } document.addEventListener(visibilityChange,handle,false); videoElement = document.getElementById("videoElement"); videoElement.addEventListener('ended',videoEnded,false); videoElement.addEventListener('play',videoPlay,false); videoElement.addEventListener('pause',videoPause,false); // 如果页面变为不可见状态 则暂停视频播放 // 如果页面变为可见状态,则继续视频播放 function handle() { // 通过visibilityState属性值判断页面的可见状态 console.log(document.visibilityState); if(document[hidden]) { videoElement.pause(); }else { videoElement.play(); } } // 播放视频 function play() { videoElement.play(); } // 暂停播放 function pause() { videoElement.pause(); } function PlayOrPause() { if(videoElement.paused) { videoElement.play(); }else { videoElement.pause(); } } function videoEnded(e) { videoElement.currentTime = 0; this.pause(); } function videoPlay(e) { var btnPlay = document.getElementById("btnPlay"); btnPlay.innerHTML = "暂停"; } function videoPause(e) { var btnPlay = document.getElementById("btnPlay"); btnPlay.innerHTML = "播放"; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
var hidden,
visibilityChange,
videoElement;
if(typeof document.hidden !== 'undefined') {
    hidden = 'hidden';
    visibilityChange = 'visibilitychange';
}else if(typeof document.mozHidden !== 'undefined') {
    hidden = 'mozHidden';
    visibilityChange = 'mozvisibilitychange';
}else if(typeof document.msHidden !== 'undefined') {
    hidden = 'msHidden';
    visibilityChange = 'msvisibilitychange';
}else if(typeof document.webkitHidden !== 'undefined') {
    hidden = 'webkitHidden';
    visibilityChange = 'webkitvisibilitychange';
}
document.addEventListener(visibilityChange,handle,false);
videoElement = document.getElementById("videoElement");
videoElement.addEventListener('ended',videoEnded,false);
videoElement.addEventListener('play',videoPlay,false);
videoElement.addEventListener('pause',videoPause,false);
// 如果页面变为不可见状态 则暂停视频播放
// 如果页面变为可见状态,则继续视频播放
function handle() {
    // 通过visibilityState属性值判断页面的可见状态
    console.log(document.visibilityState);
    if(document[hidden]) {
        videoElement.pause();    
    }else {
        videoElement.play();
    }
}
// 播放视频
function play() {
    videoElement.play();
}
// 暂停播放
function pause() {
    videoElement.pause();
}
function PlayOrPause() {
    if(videoElement.paused) {
        videoElement.play();
    }else {
        videoElement.pause();
    }
}
function videoEnded(e) {
    videoElement.currentTime = 0;
    this.pause();
}
function videoPlay(e) {
    var btnPlay = document.getElementById("btnPlay");
    btnPlay.innerHTML = "暂停";
}
function videoPause(e) {
    var btnPlay = document.getElementById("btnPlay");
    btnPlay.innerHTML = "播放";
}

实现Fullscreen API

在HTML5中,新增了一个Fullscreen API,其作用是将页面整体或页面中某个局部区域设为全屏显示状态。

浏览器支持程度:Firefox10 ,chrome16 ,Safari5.1

在Fullscreen API中,可以通过DOM对象的根节点对象或某个元素的requestFullscreen属性值和执行相对应的方法来判断浏览器是否支持Fullscreen API。代码如下:

JavaScript

var docElm = document.documentElement; if(docElm.requestFullscreen) { docElm.requestFullscreen(); }else if(docElm.mozRequestFullScreen) { docElm.mozRequestFullScreen(); }else if(docElm.webkitRequestFullScreen) { docElm.webkitRequestFullScreen(); }

1
2
3
4
5
6
7
8
var docElm = document.documentElement;
if(docElm.requestFullscreen) {
        docElm.requestFullscreen();
}else if(docElm.mozRequestFullScreen) {
        docElm.mozRequestFullScreen();
}else if(docElm.webkitRequestFullScreen) {
        docElm.webkitRequestFullScreen();
}

在Fullscreen API中,也可以通过DOM对象或某个元素的exitFullscreen与CanvelFullScreen属性和方法将当前页面或某个元素设定为非全屏显示状态。

如下代码:

JavaScript

if(document.exitFullscreen) { document.exitFullscreen(); }else if(document.mozCancelFullScreen) { document.mozCancelFullScreen(); }else if(document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); }

1
2
3
4
5
6
7
if(document.exitFullscreen) {
    document.exitFullscreen();
}else if(document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
}else if(document.webkitCancelFullScreen) {
    document.webkitCancelFullScreen();
}

在Fullscreen API中,可以通过监听DOM对象或某个元素的fullscreenchange事件(当页面或元素从非全屏显示状态变为全屏显示状态,或从全屏显示状态变为非全屏显示状态时触发)。代码如下:

JavaScript

document.addEventListener('fullscreenchange',function(){},false); document.addEventListener('mozfullscreenchange',function(){},false); document.addEventListener('webkitfullscreenchange',function(){},false);

1
2
3
document.addEventListener('fullscreenchange',function(){},false);
document.addEventListener('mozfullscreenchange',function(){},false);
document.addEventListener('webkitfullscreenchange',function(){},false);

在css样式代码中,我们可以使用伪类选择器来单独指定处于全屏显示状态的页面或元素样式:

JavaScript

html:-moz-full-screen { background:red; } html:-webkit-full-screen { background:red; } html:fullscreen { background:red; }

1
2
3
4
5
6
7
8
9
html:-moz-full-screen {
    background:red;
}
html:-webkit-full-screen {
    background:red;
}
html:fullscreen {
    background:red;
}

最后我们来看一个demo,在页面中有一个按钮,点击后,页面会变成全屏状态,再点击后,页面会退出全屏;

HTML代码如下:

JavaScript

<input type="button" id="btnFullScreen" value="页面全屏显示" onclick="toggleFullScreen();"/> <div style="width:100%;" id="fullscreentState">非全屏显示</div>

1
2
<input type="button" id="btnFullScreen" value="页面全屏显示" onclick="toggleFullScreen();"/>
<div style="width:100%;" id="fullscreentState">非全屏显示</div>

Javascript如下:

JavaScript

var docElm = document.documentElement; var fullscreentState = document.getElementById("fullscreentState"); var btnFullScreen = document.getElementById("btnFullScreen"); fullscreentState.style.height = docElm.clientHeight 'px'; document.addEventListener('fullscreenchange',function(){ fullscreentState.innerHTML = (document.fullscreen) ? "全屏显示" : "非全屏显示"; },false); document.addEventListener('mozfullscreenchange',function(){ fullscreentState.innerHTML = (document.mozFullscreen) ? "全屏显示" : "非全屏显示"; },false); document.addEventListener('webkitfullscreenchange',function(){ fullscreentState.innerHTML = (document.webkitFullscreen) ? "全屏显示" : "非全屏显示"; },false); function toggleFullScreen() { if(btnFullScreen.value == '页面全屏显示') { btnFullScreen.value = '页面非全屏显示'; if(docElm.requestFullscreen) { docElm.requestFullscreen(); }else if(docElm.mozRequestFullScreen) { docElm.mozRequestFullScreen(); }else if(docElm.webkitRequestFullScreen) { docElm.webkitRequestFullScreen(); } }else { if(document.exitFullscreen) { document.exitFullscreen(); }else if(document.mozCancelFullScreen) { document.mozCancelFullScreen(); }else if(document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } btnFullScreen.value = "页面全屏显示"; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
var docElm = document.documentElement;
var fullscreentState = document.getElementById("fullscreentState");
var btnFullScreen = document.getElementById("btnFullScreen");
fullscreentState.style.height = docElm.clientHeight 'px';
document.addEventListener('fullscreenchange',function(){
    fullscreentState.innerHTML = (document.fullscreen) ? "全屏显示" : "非全屏显示";
},false);
document.addEventListener('mozfullscreenchange',function(){
    fullscreentState.innerHTML = (document.mozFullscreen) ? "全屏显示" : "非全屏显示";
},false);
document.addEventListener('webkitfullscreenchange',function(){
    fullscreentState.innerHTML = (document.webkitFullscreen) ? "全屏显示" : "非全屏显示";
},false);
function toggleFullScreen() {
    if(btnFullScreen.value == '页面全屏显示') {
        btnFullScreen.value = '页面非全屏显示';
        if(docElm.requestFullscreen) {
            docElm.requestFullscreen();
        }else if(docElm.mozRequestFullScreen) {
            docElm.mozRequestFullScreen();
        }else if(docElm.webkitRequestFullScreen) {
            docElm.webkitRequestFullScreen();
        }
    }else {
        if(document.exitFullscreen) {
            document.exitFullscreen();
        }else if(document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        }else if(document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        }
        btnFullScreen.value = "页面全屏显示";
    }
}

赞 收藏 评论

网上十大正规赌博平台 1

Web性能优化系列 – 通过提前获取DNS来提升网页加载速度

2015/04/23 · HTML5 · DNS, 性能优化

本文由 伯乐在线 - 刘健超-J.c 翻译,sunbiaobiao 校稿。未经许可,禁止转载!
英文出处:www.deanhume.com。欢迎加入翻译组。

我时常寻找方法改善网站性能,为的就是能提供更佳的用户体验。也许你经常会发现你的网站运行高效且性能优异。你也可能曾让你的应用程序在Google PageSpeed或Yahoo! YSlow进行测试,并得到高分。然而,有一样东西一直影响页面加载时间。它在一个页面上,花费很多时间去查找不同组件的DNS。例如,下面这幅图片展示了我的博客首页所需资源的加载瀑布图。

网上十大正规赌博平台 2

请注意条形图的灰蓝色部分,它出现在瀑布图中的大部分组件前。这灰蓝色代表下载资源前查找DNS所需时间。这竟然占了组件下载时间的很大部分!即使组件进行了优化,并已经最小化/合并/压缩处理,你仍然需要等待查找DNS时间。我利用webpagetest.org做了一个关于该网站DNS查找时间的表格。

网上十大正规赌博平台 3

从上图可看到,DNS查找时间都很高, 如果能减少该时间并提速,便会让资源加载变得更加高效。幸运的是,有个很棒的技巧能让网站的加载时间变得更快。它被称为DNS预取,并且很容易实现。你所需做的是,在网页顶部添加以下属性作为链接(link)。

<link rel="dns-prefetch" href="//host_name_to_prefetch.com">

DNS预取是在用户尝试点击链接前试图解析域名。一旦域名被解析,且用户导航到该域名,则不会因DNS查找而导致加载时间变长。在这个博客主页里,有很多跳转到不同帖子的链接。如果能在用户导航到下一个页面前,预取一些外部链接的DNS,这将会大大减少下一个页面的DNS查找时间。根据Chromium documentation所说,如果用户能将域名解析成IP地址并且缓存之,则DNS查找时间能低至0-1毫秒(千分之一秒)。这是相当令人印象深刻的!

我在网站添加DNS预取功能后,确实能显著改善页面加载时间。目前,这项技术被大多数主流浏览器所支持(除了IE),所以,当前没有任何理由不在你的web应用上使用这项技术!DNS预取是一个安全的HTML5特性,它会被那些不支持该技术的老旧浏览器简单忽略掉。如果你的网页内容是来自多个域名,那么这绝对是一个聪明的,能加快页面加载速度的方法。

打赏支持我翻译更多好文章,谢谢!

打赏译者

Chrome开发者工具不完全指南(二、进阶篇)

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

原文出处: 卖烧烤夫斯基   

上篇向大家介绍完了基础功能篇,这次分享的是Chrome开发工具中最有用的面板Sources。  Sources面板几乎是我最常用到的Chrome功能面板,也是在我看来决解一般问题的主要功能面板。通常只要是开发遇到了js报错或者其他代码问题,在审视一遍自己的代码而一无所获之后,我首先就会打开Sources进行js断点调试,而它也几乎能解决我80%的代码问题。Js断点这个功能让人兴奋不已,在没有js断点功能,只能在IE(万恶的IE)中靠alert弹出窗口调试js代码的时代(特别alert一个object根本不会理你),那样的开发环境对于前端程序员来说简直是一场噩梦。本篇文章讲会介绍Sources的具体用法,帮助各位在开发过程中够愉快地调试js代码,而不是因它而发疯。首先打开F12开发工具切换到Sources面板中:

网上十大正规赌博平台 4

Sources功能面板是资源面板,他主要分为四个部分,四个部分并不是独立的,他们互相关联,互动共同实现一个重要的功能:监控js在执行期的活动。简单来说就是断点啦。

首先我们来看区域1,它的功能有些类似于Resources面板,主要是显示网页加载的脚本文件:例如css, js等资源文件(它不包含cookie,img等静态资源文件)。

 

网上十大正规赌博平台 5

 

 

 

区域1的导航条上有三个tab切换选项,他们都存有不同域名和环境下的js和css文件,我们首先来说明Sources(资源)选项的作用:

Sources: 包含该项目的静态资源文件。双击选中文件,该文件内容会在区域2中显示,如果你选中的是js文件,那么你可以在区域2种单击行号进行断点调试,只要js执行到了你所标记的这一行,它会停止向下执行并且等待你的命令:

网上十大正规赌博平台 6

从上图可以看到js执行到断点处时各个区域的变化,首先是区域3中的Breakpoints记录信息会变高亮,然后是区域4中Scope 选项中列出了断点处私有和公有的变量信息,这样,我可以很直观地知道,此时此刻js的执行状态。同样的,你可以把鼠标放到区域2种的某个变量上,浏览器会弹出一个小框框,框框里面则是你悬浮其上的变量所有信息:

 

网上十大正规赌博平台 7

然后,你可以按F10跟着js执行的路径一步一步地走下去,如果你遇到了一个函数包含着另外一个函数,那么你可以按F11进入到个函数中去观察它的代码执行活动。你也可以通过点击区域1底部的各个图标对js代码进行跟踪。不过我建议你使用快捷键,故名思义,因为它比较快捷方便。不过怎么用完全按照个人习惯来吧。下图是各个按钮的作用功能。

 

网上十大正规赌博平台 8

 

 在上图蓝色圆圈中数字,它们分别代表:

  1、停止断点调试

  2、不跳入函数中去,继续执行下一行代码(F10)

  3、跳入函数中去(F11)

  4、从执行的函数中跳出

  5、禁用所有的断点,不做任何调试

  6、程序运行时遇到异常时是否中断的开关

接下来在区域4种切换到Watch Expressions 选项,它的作用是为目前断点添加表达式,使得每次断点往下走一步都会执行你写下的js代码。需要注意的是这个功能必须谨慎使用,因为这可能会导致你写下的监控代码段会不断地被执行。

网上十大正规赌博平台 9

 

为了避免你的调试代码重复执行,我们可以在调试时直接在console控制台上一次性地输出当前断点处的信息(推荐这样做)。为了验证我们在console面板中拥有的是当前断点环境,我门可以对比断点执行前后的this值变化。

网上十大正规赌博平台 10      网上十大正规赌博平台 11

如果你觉得在断点的时候为了看一个变量必须借用console面板输出的方式来查看会比较麻烦,那么你可以更新最新版的Chrome,它已经为我们解决了这个烦恼。为了方便开发者调试,在这一点上谷歌已经做到了极致,就在前几天更新过Chrome以后,卤煮意外地发现了断点时监控环境变量的另外一种方式,这种方式极为清晰,在断点调试的时候,区域2中会自动显示每个变量的值,每次代码往下走的时候这个值都回时时更新。这让开发者对当前环境变量几乎可以说是一目了然。(此功能有一个小缺陷,那就是无法查看数组或者对象的具体索引和值,不过我相信google会改进它的。)

网上十大正规赌博平台 12

 

当你的项目已经线上,出现了一个bug,你修复了之后无法看到它真正在线上的效果,那么你可以在打开线上的项目,直接在浏览器中修改代码然后看到效果。这样的效果往往是最直接的,这种方法也能帮你省去频繁验证发布的麻烦,毕竟身为前端码农的你也一定会听到过后台(通常情况下是后台发布)大哥的抱怨:“XXX,测试通过了没,不要出现了哈,发布一次很麻烦的!”。而在Chrome里面,只需要在区域2种直接修改,你就可以验证你的代码在线上是否可行。卤煮在此处只是指出该功能的用法之一。其他的就凭诸位的聪明才智去想了。

网上十大正规赌博平台 13        网上十大正规赌博平台 14

即使在断点时,你也可以编辑代码,按ctrl S保存之后,你会看到区域2的背景由白色变为浅色,而断点会重新开始执行。

回到区域1,Content script 选项开里面包含着一些第三方插件或者浏览器自身的js代码,经常它是被忽略的,实际上它的作用很少。我们可以更多关注一下Snippets选项。还记得基础篇里面介绍的style吗?在里面我们可以编辑界面的css代码并且即时看到它们的映射效果,同样地,在Sinppets中,我们也 可以编辑(重写)js代码片段。这些片段实际上就相当于你的js文件一样,不同的是本地的js文件在编辑器里面编辑的,而此处,你是在浏览器中编写的。这些代码片段在浏览器刷新的时候既不会消失,也不会执行,除非是你手动执行它。它可以存在你的本地浏览器中,即使关闭浏览器,再次打开时它依然还在那里。它的主要作用可以使得我们编写一些项目的测试代码时提供便捷,你知道,如果你在编辑器上编写这些代码,在发布时你必须为它们添加注释符号或者手动删除它们,而在浏览器上编写就不需要这样繁琐了。

Snippets选项的空白处右键后选择弹出的new选项,建立一个你自己的新的文件,然后在区域2种编辑它。

网上十大正规赌博平台 15

 

Snippets 的非常功能强大,它的许多隐藏功能还有待发掘。目前卤煮使用它是在记住调试片段、单元测试、少量的功能代码编写功能上。

最后我们看看js中时间丰富的监控功能,同上篇文章介绍的一样,Sources面板和Elements面板一样有监控事件的功能,而且Sources中功能更加丰富,也更加强大。它的这部分功能集中在区域3中。我以下图为例,观察其作用。

网上十大正规赌博平台 16

 

从上到下,紫色圈内的数字的意义:

1、断点处的债堆栈,就是从该函数起,逐级追寻调用到他的函数名。例如:

JavaScript

function a () { b(); } function b() { c(); } function c() { //在该处断点,查看call stack } a->b->c. call stack 从上到下的顺序就是 c b a

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function a () {
   b();
}
function b() {
   c();  
}
function c() {
  //在该处断点,查看call stack  
}
a->b->c.
call stack 从上到下的顺序就是
c
b
a

2、在区域2中你的断点调试信息。当某个断点在执行的时候对应的信息会高亮,双击该处信息可以在区域2中快速定位。

3、添加的Dom监控信息。

4、击 并输入 URL 包含的字符串即可监听该 URL 的 Ajax 请求,输入内容就相当于 URL 的过滤器。如果什么都不填,那么就监听所有 XHR 请求。一旦 XHR 调用触发时就会在 request.send() 的地方中断。

5、为网页添加各种类型的断点信息。如选中了Mouse中的某一项(click),当你在网页上出发这个动作(单击网页任意地方),你浏览器就是立刻断点监控该事件。

 

值得再次重复一遍,Sources是一般的功能开发中最常用到也是最有用的功能面板,它里面的许多功能对于我们开发前端工程来说是非常有帮助的。在web2.0时代的今天,我不推荐依然在自己的代码里面写调试信息的行为,因为这会然你的开发变得繁琐。Chrome开发工具给我们提供的强大功能,我们应该好好利用之。这篇文章就到此结束,虽然有点繁琐,但总算基本表述了卤煮使用经验和想法,希望对你有帮助。如果你觉得不错,请推荐一下本文并继续关注卤煮在的博客。在下一篇中我将向大家介绍Chrome开发工具中的性能方面的调试。

1 赞 15 收藏 3 评论

网上十大正规赌博平台 17

本文由网上十大正规赌博平台发布于正规赌博十大app排名,转载请注明出处:Web性能优化系列网上十大正规赌博平台,HTML5中与

关键词: ag视讯

上一篇:值得收藏,Element节点类型详解

下一篇:没有了