安装主题(可以无视)
Elements
network
console
安装主题(可以无视)

1、添加拓展程序Zero Dark Matrix(更多工具-拓展程序-搜索-安装)
2、打开chrome://flags,启用开发者工具实验
Chrome开发工具Chrome开发工具Chrome开发工具Chrome开发工具Chrome开发工具Chrome开发工具Chrome开发工具Chrome开发工具Chrome开发工具
3、F12打开调试者工具,settings-Experiments-Allow custom UI themes
Chrome开发工具Chrome开发工具Chrome开发工具Chrome开发工具Chrome开发工具Chrome开发工具Chrome开发工具Chrome开发工具Chrome开发工具
Elements
在Element中主要分为两大块
Chrome开发工具Chrome开发工具Chrome开发工具Chrome开发工具Chrome开发工具Chrome开发工具Chrome开发工具Chrome开发工具Chrome开发工具
技巧:
1、在A中,每当你的鼠标移动到任何一个元素上,对应的html视图中会给该元素蓝色的背景。
2、如果你单击选中一个元素,在A部分的底部,会显示该元素在html结构中的位置关系
3、然后你可以在B部分的styles选项中编辑该元素的样式,并且看到html结构的实时更新
4、你可以在B界面中切换到Event Listeners选项,观察该元素绑定的事件。
Chrome开发工具Chrome开发工具Chrome开发工具Chrome开发工具Chrome开发工具Chrome开发工具Chrome开发工具Chrome开发工具Chrome开发工具
5、选中一个元素,右击鼠标,你会看到有一个弹出窗口出现,里面有若干选项
(1) Add attribute:添加属性,比如添加title属性;(节点没有属性时,快捷键为Enter)
(2) Edit attribute:编辑属性(在节点的属性上右键才出现这项);(节点有属性时,快捷键为Enter)
(3)Force element state: 为元素激活某种状态(主要用在可以几乎的元素比如a、input、button等)
(4)Edit as HTML:编辑该元素(你可以重写它的整个content)甚至修改它的标签名称
中间简单的掠过…….
(5)Break on:
Subtree modifications -> 子树修改时打断;
Attributes modifications -> 节点属性修改时打断;
Node removal -> 节点移除时打断;
6、在B界面中切换到Properties选项,可以看到选中元素的各种信息
Chrome开发工具Chrome开发工具Chrome开发工具Chrome开发工具Chrome开发工具Chrome开发工具Chrome开发工具Chrome开发工具Chrome开发工具
7、点击A界面的任意地方,按快捷键ctrl+F可以看到底部有输入框,在输入框中输入你想要查找的任何内容,如果匹配到了,都回在A面板中高亮显示
Chrome开发工具Chrome开发工具Chrome开发工具Chrome开发工具Chrome开发工具Chrome开发工具Chrome开发工具Chrome开发工具Chrome开发工具
network

Network是一个监控当前网页所有的http请求的面版,它主体部分展示的是每个http请求,每个字段表示着该请求的不同属性和状态
Chrome开发工具Chrome开发工具Chrome开发工具Chrome开发工具Chrome开发工具Chrome开发工具Chrome开发工具Chrome开发工具Chrome开发工具
Chrome开发工具Chrome开发工具Chrome开发工具Chrome开发工具Chrome开发工具Chrome开发工具Chrome开发工具Chrome开发工具Chrome开发工具
console

Chrome的控制台,相当于eclipse的控制台,同时也是一个Javascript运行环境,我们可以在这上面直接写JS代码。我们页面中通常需要使用console.log("xxxx")进行输出调试,输出的内容就在控制台
Chrome开发工具Chrome开发工具Chrome开发工具Chrome开发工具Chrome开发工具Chrome开发工具Chrome开发工具Chrome开发工具Chrome开发工具





作者:星辰 时间:2018-06-23 浏览 280评论 0 赞 0砸 0 标签: 前端 工具
评论
还可以再输入500个字

请您注意

·自觉遵守:爱国、守法、自律、真实、文明的原则
·尊重网上道德,遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规
·严禁发表危害国家安全,破坏民族团结、国家宗教政策和社会稳定,含侮辱、诽谤、教唆、淫秽等内容的作品
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·您在NoteShare上发表的作品,NoteShare有权在网站内保留、转载、引用或者删除
·参与本评论即表明您已经阅读并接受上述条款