谷歌浏览器怎么调试js 谷歌浏览器调试javascript教程
谷歌浏览器是一款由谷歌公司开发的浏览器。谷歌浏览器是一款基于其他开源软件所撰写的。下面小编为大家分享一篇谷歌浏览器调试javascript的教程,希望帮助大家
首先我们打开开发者工具,你可以直接在页面上点击右键,然后选择审查元素或者在Chrome的工具中找到或者你直接记住这个快捷方式: Ctrl+Shift+I (或者Ctrl+Shift+J直接打开控制台),或者直接按F12。
打开的开发者工具就长下面的样子,建议大家将开发者工具弹出作为一个独立的窗口:
1、Elements标签页
这个就是查看、编辑页面上的元素,包括HTML和CSS:
左侧就是对页面HTML结构的查看与编辑,你可以直接在某个元素上双击修改元素的属性,或者你点右键选;Edit as Html;直接对元素的HTML进行编辑,或者删除某个元素,所有的修改都会即时在页面上得到呈现。(注:看到上面右键菜单的最后一个选项;审查元素了么?这是不是说明这个开发者工具的页面也是HTML来的呢?你点一下就知道了哦,嘿嘿)
你还可以对某个元素进行监听,在JS对元素的属性或者HTML进行修改的时候,直接触发断点,跳转到对改元素进行修改的JS代码处:
Elements标签页的右侧可以对元素的CSS进行查看与编辑修改:
你还可以通过这里看到各CSS选择器设置的CSS值的覆盖情况。
下面的Metrics可以看到元素占的空间情况(宽、高、Padding、Margin)
注意到上面的Properties没有?这个很有用哦,可以让你看到元素具有的方法与属性,比查API手册要方便得多哦(要注意某些方法和属性在IE、FireFox等其他浏览器下面的支持情况哦)。
2、Resources标签页
Resources标签页可以查看到请求的资源情况,包括CSS、JS、图片等的内容,同时还可以查看到存储相关的如Cookies、HTML5的Database和LocalStore等,你可以对存储的内容编辑和删除。
这里的CSS文件有一个好玩的特性,你可以直接修改CSS文件,并且修改即时生效哦:
3、Network标签页
Network标签页对于分析网站请求的网络情况、查看某一请求的请求头和响应头还有响应内容很有用,特别是在查看Ajax类请求的时候,非常有帮助。注意是在你打开Chrome开发者工具后发起的请求,才会在这里显示的哦。
点击左侧某一个具体去请求URL,可以看到该请求的详细HTTP请求情况:
我们可以在这里看到HTTP请求头、HTTP响应头、HTTP返回的内容等信息,对于开发、调试,都是很有用的。
4、Scripts标签页
很明显,这个标签页就是查看JS文件、调试JS代码的,直接看下图的说明:
还有你可以打开Javascript控制台,做一些其他的查看或者修改:
你甚至还可以为某一XHR请求或者某一事件设置断点:
5、Timeline标签页
注意这个Timeline的标签页不是指网络请求的时间响应情况哦(这个在Network标签页里查看),这个Timeline指的JS执行时间、页面元素渲染时间:
点击底部的Record就可以开始录制页面上执行的内容。
6、Profiles标签页
这个主要是做性能优化的,包括查看CPU执行时间与内存占用:
7、Audits标签页
这个对于优化前端页面、加速网页加载速度很有用哦(相当与Yslow):
点击run按钮,就可以开始分析页面,分析完了就可以看到分析结果了
它甚至可以分析出页面上样式表中有哪些CSS是没有被使用的哦:
8、Console标签页
就是Javascript控制台了:
这个除了查看错误信息、打印调试信息(console.log())、写一些测试脚本以外,还可以当作Javascript API查看用。
例如我想查看console都有哪些方法和属性,我可以直接在Console中输入;并执行:
怎么样,一目了然了吧 ?再例如我想查看日期函数都有哪些方法:
(注:注意在这里看到的某些方法和属性是ES5新增的,记得兼容其他浏览器的支持情况哦)
Google Chrome除了简洁、快速,现在的Chrome的插件也非常的丰富了。而对于web开发者来说,Chrome对于HTML5、CSS3等一些新标准的支持也是比较完善的,而且Chrome的开发者工具我个人认为真的非常好用,这就是为什么我向web开发者推荐使用Chrome的原因。
谷歌浏览器怎么调试js 谷歌浏览器调试javascript教程的更多相关文章
- chrome浏览器,调试详解,调试js、调试php、调试ajax
1.可以看到js报错 2.可以看到php报错 3.可以看到ajax返回的信息,以及报错情况 4.可以看到调用了那些内容以及顺序 5.可以调试js代码 6.可以查看session等等 功能非常之强大. ...
- 谷歌浏览器如何调试JS
平常在开发过程中,经常会接触到前端页面.那么对于js的调试那可是家常便饭,谷歌浏览器是常用来调试JS代码的工具,本文主要介绍如何利用谷歌浏览器来调试JS代码,协助我们进行开发工作,加快开发效率. 1. ...
- 【JS学习】-利用谷歌浏览器调试JS代码(转)
谷歌浏览器是常用来调试JS代码的工具,本文主要介绍如何利用谷歌浏览器来调试JS代码,协助我们进行开发工作. 首先,打开谷歌浏览器,按快捷键F12或者ctrl+shift+j,就可以打开谷歌浏览器的开发 ...
- 谷歌浏览器怎么调试js
首先我们打开开发者工具,你可以直接在页面上点击右键,然后选择审查元素或者在Chrome的工具中找到或者你直接记住这个快捷方式: Ctrl+Shift+I (或者Ctrl+Shift+J直接打开控制台) ...
- [转]javascript console 函数详解 js开发调试的利器
javascript console 函数详解 js开发调试的利器 分步阅读 Console 是用于显示 JS和 DOM 对象信息的单独窗口.并且向 JS 中注入1个 console 对象,使用该 ...
- VSCode调试Html中的脚本 vscode前端常用插件推荐,搭建JQuery、Vue等开发环境 vsCode 添加浏览器调试和js调试的方法总结 VS Code - Debugger for Chrome调试js
一.背景 使用Visual Studio Code写了一个简单的Html页面,想调试下其中script标签里的javascript代码,网上查了一通,基本都是复制粘贴或者大同小异的文章,就是要安装De ...
- Google Chrome调试js入门
平常在开发过程中,经常会接触到前端页面.那么对于js的调试那可是家常便饭,不必多说.最近一直在用火狐的Firebug,但是不知道怎么的不好使了.网上找找说法,都说重新安装狐火浏览器就可以了,但是我安装 ...
- 关于app上页面和js的调试
不久前折腾了一晚上关于app上的页面和js的调试: 首先得准备几个比较比较常用的工具: 1.chrome(这个都没有你还干啥fe呀) 2.Fiddler(抓包神器,基本也是必备咯) 3.sublime ...
- JS事件调试
JS事件调试 - 查找HTML元素绑定的事件以及绑定代码所在位置 日常的网页开发调试工作中,经常需要知道指定的某个网页元素绑定了哪些事件以及绑定代码的位置,下面介绍三种用来跟踪页面中的事件的方法. ...
随机推荐
- python16_day27【crm 内嵌、删除、action】
一.内嵌 二.删除及关联关联显示 三.action
- forEach方法的实现
var arr = [1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5]; Array.prototype.forEach = Array.prototype.fo ...
- Django:学习笔记(8)——文件上传
Django:学习笔记(8)——文件上传 文件上传前端处理 本模块使用到的前端Ajax库为Axio,其地址为GitHub官网. 关于文件上传 上传文件就是把客户端的文件发送给服务器端. 在常见情况(不 ...
- springcloud13---zuul
Zuul:API GATEWAY (服务网关): http://blog.daocloud.io/microservices-2/ 一个客户端不同的功能请求不同的微服务,那么客户端要知道所有微服务的 ...
- 20145106 《Java程序设计》第5周学习总结
教材学习内容总结 个人认为本周的学习在很大程度上是作为之前学习内容的补充.之前编译的程序相信所有人都会失败过,error算是我程序的老主顾了. 第八章名为"异常处理".本章中,我们 ...
- 20145319 《网络对抗》逆向与Bof基础
20145319 逆向与Bof实验 1 实验内容 本次实验以可执行文件pwn1为例,将对pwn1进行反汇编的基础上进行功能上的解读,并进行缓冲区溢出攻击 可执行文件pwn1的正常流程是主函数调用foo ...
- HeyWeGo小组《Java程序设计》 2015—2016年学期团队项目总结
HeyWeGo小组<Java程序设计> 2015—2016年学期团队项目总结 题目简介 一个简单的扫雷小游戏,在12*12的方格盘上,首先可以设定雷的个数,然后点击开始程序就会随机布雷,开 ...
- 从IC设计业看中国企业之发展
从IC设计业看中国企业之发展 在半导体领域,国际平均毛利润水平为40%.去年IC设计年会中,中国半导体行业协会IC设计分会理事长魏少军指出,中国IC设计业平均毛利润水平比国际平均水平低了12.39 ...
- jQuery Mobile中的页面加载与跳转机制
第一次做用jQuery Mobile做东西,发现一些跟平时的思维习惯不太一样的.其中这个框架的页面加载机制便是其中一个.如果不明白其中的奥秘,往往会出现一些让人摸不着头脑的怪现象,比如页面进入后点击按 ...
- C# 版本和.NET 版本以及VS版本的对应关系
https://en.wikipedia.org/wiki/C_Sharp_(programming_language)#Versions http://stackoverflow.com/quest ...