chrome 技巧记录一些以前不太熟悉的_html/css

首頁

web前端

html教學

chrome 技巧记录一些以前不太熟悉的_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:52 AM

chrome已经不知道用了多少年了,但是还是有些技巧不熟悉,记录下有用的和自己不熟悉的

如何查看dom的绑定事件(查看jquery的绑定事件)

新版本的network的类型选项哪去了?

在Sources里面找需要的资源,在js文件里面找某个函数

格式化js,(也可以帮你格式化自己本地的js)

断点,给dom断点,xhr断点,异常断点

遇到的一些问题

如何查看dom的绑定事件(查看jquery的绑定事件)

查看dom的绑定事件,这个是非常必须的一个技能.chrome支持也挺好

如下图所示,选中dom，在Event Listeners里面的listenersBody

问题来了

listenersBody根本显示不完全啊,怎么办?

在listenersBody这一行,点鼠标右键,会出来弹框store as global variable

点击store as global variable,在console里面就会显示全整个函数了

问题又来了

现在写js很多人都用jq,是看不到原始的绑定事件的

就我知道的而言,有2个办法是可以看到绑定事件的

1.下载chorme插件Visual-Event

好吧问题又来了,chrome web store在国内压根就打不开

解决办法FQ咯,或者

从这个地址下载crx, 自己手动安装

装完Visual-Event后,点一下向眼睛一样的图标,鼠标放在需要查看的dom上就会显示出绑定的事件了

2.通过dom的属性和$.cache方法来找

选择要查看事件的dom

查看他的属性(jquery+一段数字的属性)如下图

拿到属性值,在console选项卡里面输入$.cache[属性值] 展开就可以看到绑定的事件了

新版本的network的类型选项哪去了?

新的chrome里面是直接看不到分类的(documents,images,script,xhr...)

有个小漏斗,点开就可以看见了

在Sources里面找需要的资源,在js文件里面找某个函数

有时候你需要查找某个js文件,可以这样操作

1.打开Sources选项卡

2.按ctrl+p

3.输入你要查找的js文件名

当然这个不仅仅是智能查找js,html和css也可以查找

有时候你需要查找js里面的某个函数

1.首先选中某个js文件(必须)

2.crtl+shift+o

如果不选中js文件按crtl+shift+o就打开标签管理器了

格式化js,(也可以帮你格式化自己本地的js)

格式化js咯,大括号咯.

网络上的js都是被压缩合并过的,用大括号可以格式化网络上的js

当然用大括号也可以格式化本地的js，把本地的js粘贴到打开的js里面,按大括号即可

这个格式化的大括号只是在source选项卡里面才有

断点,给dom断点,xhr断点,异常断点

dom的断点

dom断点有3中形式

1.Subtree modifications (被监听的dom的子节点发生变化)

2.Attributes modifications (被监听的dom属性发生变化)

3.Node removal (当被监听的dom被删除的时候)

设置了这些断点后，当监听到变化的时候,会断点后发生变化的js的地方

比如删除,会断点到删除的js地方

如何设置断点了？

1.打开Element面板

2.选择一个dom元素,鼠标右键

3.选择break on... ，就会弹出3个断点方式了

如下图所示

xhr断点

给某个xhr断点后可以进入发起请求的js的地方

操作如下

1.打开source选项卡

2.有一个XHR Breakpoints 的

3.后面有一个+号,点+号进行添加

可以对所有的xhr进行断点,如果只是想对某一个xhr进行断点,就输入他的地址,如图所示

如果要删除断点，选中某一条,鼠标右键删除即可

异常断点

就是可以定位到js抛出异常的位置,方便查错咯

操作如下

1.进入socurce选项卡

2.点圆形的按钮,如下图所示

遇到的一些问题

想下载插件,但是chrome web store 打不开怎么办？

我用的是chrome畅游版,可以FQ

我用了chrome官方插件pagespeed insights来测试网站的性能,可总是卡在中间？

那是因为墙的原因,FQ测试

怎么调试线上的js文件？

1。用fiddler替换

2。如果是js文件,可以格式话断点,如果不是加载的时候报错,都可以直接把原始没有压缩的代码直接拷贝进去运行

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

HTML與CSS vs. JavaScript：比較概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是：HTML負責內容結構，CSS負責樣式，JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容，確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式，使其美觀易讀。 3.JavaScript通過腳本控製網頁行為，實現動態和交互功能。

HTML：是編程語言還是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。

HTML：建立網頁的結構Apr 14, 2025 am 12:14 AM

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

從文本到網站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一種用於構建網頁的語言，通過標籤和屬性定義網頁結構和內容。 1）HTML通過標籤組織文檔結構，如、。 2）瀏覽器解析HTML構建DOM並渲染網頁。 3）HTML5的新特性如、、增強了多媒體功能。 4）常見錯誤包括標籤未閉合和屬性值未加引號。 5）優化建議包括使用語義化標籤和減少文件大小。

了解HTML，CSS和JavaScript：初學者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：構建Web內容Apr 11, 2025 am 12:12 AM

HTML的作用是通過標籤和屬性定義網頁的結構和內容。 1.HTML通過到、等標籤組織內容，使其易於閱讀和理解。 2.使用語義化標籤如、等增強可訪問性和SEO。 3.優化HTML代碼可以提高網頁加載速度和用戶體驗。

HTML和代碼：仔細觀察術語Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代碼” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代碼”代碼“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract