前台开发利器介绍

《前台开发利器介绍》由会员分享，可在线阅读，更多相关《前台开发利器介绍（35页珍藏版）》请在装配图网上搜索。

1、前台开发利器简介目录1.瑞士军刀IE开发者工具31.1.顶部菜单常用功能41.1.1.查找元素41.1.2.禁用CSS41.1.3.显示图像尺寸41.1.4.清除缓存51.1.5.调节浏览器大小51.1.6.测量页面两点距离61.1.7.获取页面某像素点颜色61.1.8.设立浏览器模式61.2.HTML工具常用功能71.2.1.样式71.2.2.跟踪样式81.2.3.布局81.2.4.属性81.2.5.查找DOM元素91.2.6.清除缓存91.2.7.保存页面91.2.8.刷新工具91.2.9.编辑101.2.10.搜索HTML101.3.CSS工具常用功能111.3.1.选择CSS文献111

2、.3.2.搜索CSS111.4.脚本工具常用功能121.4.1.启动脚本调试功能121.4.2.选择脚本文献121.4.3.添加断点121.4.4.断点管理131.4.5.执行断点131.4.6.查看局部变量131.4.7.监视变量141.4.8.调用堆栈141.4.9.控制台151.4.10.搜索脚本151.5.探查器工具常用功能161.5.1.启动探查器161.5.2.函数视图161.5.3.调用树视图161.5.4.搜索探查器172.夜视仪HttpWatch182.1.启动HttpWatch182.2.基本功能区192.3.祈求列表区202.4.具体数据区212.4.1.Overview

3、（概要）212.4.2.Headers（报头）222.4.3.Cookies（本地存储）222.4.4.Cache（缓存）232.4.5.Query String（GET方式查询串）232.4.6.POST Data（POST方式查询串）242.4.7.Content（HTTP响应信息）242.4.8.Stream（HTTP祈求、响应概要）252.4.9.MIME类型252.4.10.HTTP状态码261. 瑞士军刀IE开发者工具从IE8开始，微软提供了开发者工具，这个工具极大地以便了前端开发者，涉及DOM信息、CSS信息、JS调试、性能分析等强大功能。体积小巧、功能齐全，犹如一把瑞士军刀。我

4、们目前开发的应用基本上都是基于IE8开发的，因此这个工具对于我们来说极为重要，下面简朴简介一下各个功能。用IE浏览器打开某个页面按“F12”打开“开发人员工具”工具除顶部公共菜单外，分为HTML、CSS、脚本、探查器四大部分。1.1. 顶部菜单常用功能顶部菜单功能项1.1.1. 查找元素查找单击选择元素：可以通过鼠标选择dom对象，查看对象属性。非常实用的功能。选中后dom对象由蓝框包围。选中后的dom对象1.1.2. 禁用CSS禁用CSS：页面所有CSS无效 禁用CSS前后1.1.3. 显示图像尺寸图像显示图像尺寸：在页面的图像上显示像素数 显示图像尺寸前后1.1.4. 清除缓存缓存始终从服

5、务器中刷新：推荐勾选此项。前台文献修改后也许由于缓存导致无法生效。缓存禁用Cookie：禁用浏览器Cookie功能，根据具体需求勾选此项。缓存查看Cookie信息：查看本地Cookie信息。 查看本地Cookie信息1.1.5. 调节浏览器大小工具重新调节大小：重新调节浏览器大小1.1.6. 测量页面两点距离工具显示标尺：在页面显示一种面板，用画一条线，可获取该线的长度。有四种颜色的线供选择。1.1.7. 获取页面某像素点颜色工具演示颜色选用器：在页面显示一种面板，鼠标点击一种像素，显示该像素的颜色。1.1.8. 设立浏览器模式浏览器模式：选择目前解析页面的模式，由于我们的页面大多是要兼容低版

6、本IE的，因此推荐在兼容模式下进行开发和调试。1.2. HTML工具常用功能HTML工具重要用于HTML元素的查看、调节。很以便修改元素的属性，调节布局，合用于页面呈现方面的调节。HTML工具功能项HTML工具重要分为两个区域，左侧区域显示目前页面的HTML源代码，右侧有“样式”、“跟踪样式”、“布局”、“属性”四个Tab选项卡。分为左右两个区域1.2.1. 样式“样式”选项卡内显示的是目前选中元素的样式信息。通过内容可以清除地看到哪些样式起了作用，分别来自哪些文献，取消复选框内的对勾则该条样式无效。这里的值可以修改，修改后页面实时预览。这里重要查看页面多种样式对目前元素的影响。“样式”选项卡

7、内容1.2.2. 跟踪样式“跟踪样式”选项卡内显示的是目前选中元素起作用的CSS信息。这里重要用来查看目前元素真正起作用的CSS属性。“跟踪样式”选项卡内容1.2.3. 布局“布局”选项卡内显示的是目前选中元素的布局信息。分为offset、margin、border、padding和元素自身五部分。这里的值都可以修改。这里重要用于对页面布局进行调节。“布局”选项卡内容1.2.4. 属性“属性”选项卡显示的是目前选中元素的属性。左侧显示属性名称，右侧显示属性值。属性可进行增长、删除、修改。“属性”选项卡内容1.2.5. 查找DOM元素点击后进入选用DOM对象状态，鼠标在页面单击元素即可在开发者工

8、具中查看到该元素的信息。该功能是最常用的功能之一。选用对象后显示该对象HTML文本及样式信息1.2.6. 清除缓存点击后将清除浏览器缓存。1.2.7. 保存页面点击后将目前页面HTML格式文档存为文本文档。1.2.8. 刷新工具当页面DOM元素构造发生变化后（例如通过js创立、删除了元素），点击刷新页面信息，开发者工具会重新读取页面元素信息。1.2.9. 编辑点击进入编辑状态。可以对HTML文档随意修改，适合较多内容的修改。编辑状态1.2.10. 搜索HTML当处在HTML工具时，右上侧的搜索栏是用于搜索HTML内容的，搜索到的内容可高亮显示。HTML搜索1.3. CSS工具常用功能CSS工具

9、重要用来对页面引入的CSS文献的查看和调节，合用于对CSS从整体上的查看和修改。1.3.1. 选择CSS文献从下拉框可选择页面引用的CSS文献，或者页面自身定义的STYLE片段。从样式列表中可看到页面元素样式信息和CSS类信息，并可进行修改。选择CSS文献修改样式信息1.3.2. 搜索CSS当处在CSS工具时，右上侧的搜索栏是用于搜索CSS内容的，搜索到的内容可高亮显示。CSS搜索1.4. 脚本工具常用功能脚本工具可以对JavaScript语句进行调试、跟踪。合用于JavaScript脚本开发者对脚本进行调试、排错、优化等。分为左右两个部分1.4.1. 启动脚本调试功能点击启动脚本调试功能。1

10、.4.2. 选择脚本文献点击上侧下拉列表，选择需要查看的脚本文献，可以是独立文献也可以是页面上的脚本片段。选择脚本文献1.4.3. 添加断点在脚本行号前单击即可添加断点。再次单击取消断点。添加断点1.4.4. 断点管理右侧“断点”选项卡提供断点管理功能，涉及删除、启用、禁用等。双击断点会跳转到该断点所在的代码处。还可为断点添加条件，当条件为真时才启用断点。“断点”选项卡1.4.5. 执行断点脚本调试基本上和Eclipse的调试差不多。点击后，程序将执行，直到遇到断点或浮现错误点下后，程序会在遇到错误时自动中断，如果处在状态则不自动中断分别为“逐语句”，“逐过程”和“跳出”。1.4.6. 查看局

11、部变量右侧“局部变量”选项卡用来显示目前执行环节所处的程序段中的局部变量。涉及变量名称、值、类型。值是可以修改的。“局部变量”选项卡1.4.7. 监视变量选中一种变量，右键选择“添加监视”，即可将该变量条件到监视列表中。右侧“监视”选项卡用来显示目前监视的变量值。可以在此处手动录入需要监视的变量的名称。变量值可以修改。“监视”选项卡1.4.8. 调用堆栈“调用堆栈”选项卡用来显示目前执行语句的调用堆栈。越往下越是先调用的语句。双击堆栈中的某一行会跳转到该调用语句。以便追踪程序的执行流程。“调用堆栈”选项卡1.4.9. 控制台“控制台”选项卡用来显示目前页面的报错信息。点击报错信息后的超链接会跳

12、转到出错语句，以便查看错误。“控制台”选项卡1.4.10. 搜索脚本当处在脚本工具时，右上侧的搜索栏是用于搜索脚本内容的，搜索到的内容可高亮显示。脚本搜索1.5. 探查器工具常用功能开发者工具中的探查器并不是用来探查资源的（例如flash、图片等），而是查看脚本执行时间的，合用于脚本开发人员查找问题和进行脚本优化。1.5.1. 启动探查器点击启动探查器，刷新页面或者执行一段程序后，点击，将会得到刚刚执行程序的状况。1.5.2. 函数视图通过函数视图可以看到各个函数的调用次数和耗费时间。函数视图1.5.3. 调用树视图通过调用树视图可以看到调用关系树，通过调用关系找到调用次数过多或耗费时间较长的

13、函数。调用树视图1.5.4. 搜索探查器当处在探查器工具时，右上侧的搜索栏是用于搜索探查器内容的，搜索到的内容可高亮显示。探查器搜索2. 夜视仪HttpWatchHttpWatch是一种网页数据分析工具，可以通过其查看网页Cookies、提交数据、接受数据等。将这些通过浏览器无法见到的数据呈现出来，犹如一台夜视仪。有时候我们在开发时发现页面报错，但并不懂得是传入参数错了还是返回的数据不对，有了这个工具就可以不久定位错误，便于进一步查找。下面来简朴简介一下这个工具。2.1. 启动HttpWatch安装完毕后，点击IE工具HttpWatch，即可启动工具。启动工具点击工具界面右上角的可以使工具弹出

14、新窗口而不是吸附在浏览器里；点击恢复原状。工具分为上、中、下三部分。上部为基本功能区，例如查找、过滤等；中部为祈求列表区，显示从浏览器发出的祈求；下部为具体数据区，显示某个祈求的数据发送、数据接受等状况。工具分为上、中、下三个 部分2.2. 基本功能区点击开始记录HTTP祈求。点击结束记录HTTP祈求。点击清除祈求列表区的记录。点击对目前列表进行汇总。点击后会浮现下图内容。第一种选项卡是性能汇总信息，内容涉及耗费时间、上传数据量、下传数据量等；第二个选项卡是状态汇总信息，内容为多种祈求响应状态的汇总个数；第三个选项卡是错误汇总信息。汇总功能点击对祈求列表进行搜索。点击后会弹出新窗口，可按照多种

15、列进行定制。搜索功能点击对祈求列表进行过滤。点击后弹出新窗口，可按多种维度进行过滤。过滤功能点击对目前成果进行存储。可存为XML、CSV。2.3. 祈求列表区祈求列表区记录页面向服务器提交的祈求和服务器返回的状况，如下图。 第一列“Started”为祈求时间，记录列表中的第一次祈求设为00:00:00.000，此后各次祈求相对于第一次祈求的时间差。单位为时：分：秒。 第二列“Time”为从发出祈求到收到应答的时间差，单位为秒。 第三列“Sent”为发送祈求的数据量大小，单位为字节。 第四列“Received”为接受响应的数据量大小，单位为字节。 第五列“Method”为祈求类型，分为GET和P

16、OST。 第六列“Result”为响应HTTP状态码。通过状态码可判断错误因素、与否正常返回、与否缓存等。 第七列“Type”为响应类型。通过类型可得知返回文献的类型。 第八列“URL”为祈求地址。祈求列表2.4. 具体数据区具体数据辨别为“Overview”、“Headers”、“Cookies”、“Cache”、“Query String”、“POST Data”、“Content”、“Stream”几种功能。使用具体数据区需要选中一条祈求记录。选中一种祈求记录2.4.1. Overview（概要）Overview选项卡内显示的是一次祈求的概要状况： URL：祈求途径 Result：返回状

17、态码 Started At：祈求本地时间 HTTP Request：HTTP祈求 HTTP Response：HTTP响应Overview选项卡2.4.2. Headers（报头）Headers选项卡内显示报文头的信息，左侧显示祈求报文，右侧显示响应报文：Sent： Accept：可以接受的返回数据类型， */*表达所有 Accept-Encoding：可以接受的返回编码类型 Accept-Language：可以接受的返回语言类型 Content-Type：HTTP内容类型 Host：祈求的IP地址和端口 User-Agent：客户端浏览器信息Received： Status：响应状态 Cac

18、he-Control：缓存设立 Content-Language：响应语言类型 Content-Length：响应数据大小（字节） Server：响应的服务器类型Headers选项卡2.4.3. Cookies（本地存储）Cookie是由Internet站点创立的、将信息存储在 计算机上的文献。一旦创立Cookie，只有创立该Cookie的站点才干读取。Cookie Name：名称（key）Value：值Direction：方向。Sent是发送的键值对，Recevied是接受到的键值对。Domain：站点地址Cookies选项卡2.4.4. Cache（缓存）有些文献，例如图片、视频等资源文献

19、浏览器是会进行缓存的。在Cache这个选项卡中，可以查看文献缓存状况。如下图，左侧是祈求前的状况，右侧是祈求后的状况。 URL in cache：该祈求返回的文献与否缓存。 Expires：过期时间。 Last Modification：祈求文献在服务器最后修改时间。 Last Cache Update：缓存文献最后一次本地缓存时间。 ETag：被祈求变量的实体值，用于标示对象与否变化。Cache选项卡2.4.5. Query String（GET方式查询串）用GET方式提交数据时，可在Query String选项卡查看到提交的信息。 Parameter：变量名称 Value：变量值（中文也许

20、会显示乱码）Query String选项卡2.4.6. POST Data（POST方式查询串）用POST方式提交数据时，可在POST Data选项卡查看到提交的信息。 Parameter：变量名称 Value：变量值（中文也许会显示乱码）POST Data选项卡2.4.7. Content（HTTP响应信息）Content选项卡显示祈求返回的文献，如果是文本则显示文本，如果是图片则显示为图片。当页面浮现错误时，常常用来查看返回值与否出错，进一步判断是前台脚本错误还是后台解决错误。Content选项卡2.4.8. Stream（HTTP祈求、响应概要）Stream选项卡内显示祈求发送的和接受到

21、响应的概要信息。Stream选项卡2.4.9. MIME类型MIME（Multipurpose Internet Email Extension），意为多用途Internet邮件扩展，它是一种多用途网际邮件扩大合同，在1992年最早应用于电子邮件系统，但后来也应用到浏览器。服务器会将它们发送的多媒体数据的类型告诉浏览器，而告知手段就是阐明该多媒体数据的MIME类型，从而让浏览器懂得接受到的信息哪些是文本、哪些是图片等等。当服务器把把输出成果传送到浏览器上的时候，浏览器必须启动合适的应用程序来解决这个输出文档。数据类型MIME类型超文本标记语言文本 .htm,.html文献text/html（数

22、据类别是text，种类是html，下同）纯文本，.txt文献text/plain样式文献，.csstext/cssRTF文本，.rtf文献application/rtfJavaScript文献，.jsapplication/x-javascriptGIF图形，.gif文献image/gifPNG图形，.png文献Image/x-pngJPEG图形，.jpeg, .jpg文献image/jpegau声音，.au文献audio/basicMIDI音乐，mid,.midi文献audio/midi,audio/x-midiRealAudio音乐，.ra, .ram文献audio/x-pn-realau

23、dioMPEG，.mpg,.mpeg文献video/mpegAVI，.avi文献video/x-msvideoGZIP，.gz文献application/x-gzipTAR，.tar文献application/x-tar默认的编码形式，即URL编码形式application/x-www-form-urlencodedjson对象application/json2.4.10. HTTP状态码HTTP状态码是表达站点服务器HTTP响应状态的三位数字代码。第一位数字代表响应五种状态之一：1代表消息，2代表成功，3代表重定向，4代表祈求错误，5代表服务器错误。状态码状态信息含义100Continue初

24、始的祈求已经接受，客户应当继续发送祈求的其他部分。（HTTP 1.1新）101Switching Protocols服务器将遵从客户的祈求转换到此外一种合同（HTTP 1.1新）200OK一切正常，对GET和POST祈求的应答文档跟在背面。201Created服务器已经创立了文档，Location头给出了它的URL。202Accepted已经接受祈求，但解决尚未完毕。203Non-Authoritative Information文档已经正常地返回，但某些应答头也许不对的，由于使用的是文档的拷贝（HTTP 1.1新）。204No Content没有新文档，浏览器应当继续显示本来的文档。如果顾客

25、定期地刷新页面，而Servlet可以拟定 顾客文档足够新，这个状态代码是很有用的。205Reset Content没有新的内容，但浏览器应当重置它所显示的内容。用来强制浏览器清除表单输入内容（HTTP 1.1新）。206Partial Content客户发送了一种带有Range头的GET祈求，服务器完毕了它（HTTP 1.1新）。300Multiple Choices客户祈求的文档可以在多种位置找到，这些位置已经在返回的文档内列出。如果服务器要提出优先选 择，则应当在Location应答头指明。301Moved Permanently客户祈求的文档在其她地方，新的URL在Location头中给

26、出，浏览器应当自动地访问新的 URL。302Found类似于301，但新的URL应当被视为临时性的替代，而不是永久性的。注意，在HTTP1.0中 相应的状态信息是“Moved Temporatily”。浮现该状态代码时，浏览器可以自动访问新的URL，因此它是一种很有用的状态代码。注意这个状态代码有时候可以和301替代使用。例如，如果浏览器错误地祈求 http:/host/user（缺少了背面的斜杠），有的服务器返回301，有的则返回302。严格地说，我们只能假定只有当本来的祈求是GET时浏览器才会自动重定向。请参见307。303See Other类似于301/302，不同之处在于，如果本来的祈

27、求是POST，Location头指定的重定 向目的文档应当通过GET提取（HTTP 1.1新）。304Not Modified客户端有缓冲的文档并发出了一种条件性的祈求（一般是提供If-Modified-Since头 表达客户只想比指定日期更新的文档）。服务器告诉客户，本来缓冲的文档还可以继续使用。305Use Proxy客户祈求的文档应当通过Location头所指明的代理服务器提取（HTTP 1.1新）。307Temporary Redirect和302（Found）相似。许多浏览器会错误地响应302应答进行重定向，虽然本来的祈求是 POST，虽然它事实上只能在POST祈求的应答是303时才

28、干重定向。由于这个因素，HTTP 1.1新增了307，以便更加清除地辨别几种状态代码：当浮现303应答时，浏览器可以跟随重定向的GET和POST祈求；如果是307应答，则浏览器只 能跟随对GET祈求的重定向。（HTTP 1.1新）400Bad Request祈求浮现语法错误。401Unauthorized客户试图未经授权访问受密码保护的页面。应答中会涉及一种WWW-Authenticate头， 浏览器据此显示顾客名字/密码对话框，然后在填写合适的Authorization头后再次发出祈求。403Forbidden资源不可用。服务器理解客户的祈求，但回绝解决它。一般由于服务器上文献或目录的权限设

29、立导致。404Not Found无法找到指定位置的资源。这也是一种常用的应答。405Method Not Allowed祈求措施（GET、POST、HEAD、DELETE、PUT、TRACE等）对指定的资源不适 用。（HTTP 1.1新）406Not Acceptable指定的资源已经找到，但它的MIME类型和客户在Accpet头中所指定的不兼容（HTTP 1.1新）。407Proxy Authentication Required类似于401，表达客户必须先通过代理服务器的授权。（HTTP 1.1新）408Request Timeout在服务器许可的等待时间内，客户始终没有发出任何祈求。客户

30、可以在后来反复同一祈求。（HTTP 1.1新）409Conflict一般和PUT祈求有关。由于祈求和资源的目前状态相冲突，因此祈求不能成功。（HTTP 1.1新）410Gone所祈求的文档已经不再可用，并且服务器不懂得应当重定向到哪一种地址。它和404的不同在于，返 回407表达文档永久地离开了指定的位置，而404表达由于未知的因素文档不可用。（HTTP 1.1新）411Length Required服务器不能解决祈求，除非客户发送一种Content-Length头。（HTTP 1.1新）412Precondition Failed祈求头中指定的某些前提条件失败（HTTP 1.1新）。413R

31、equest Entity Too Large目的文档的大小超过服务器目前乐意解决的大小。如果服务器觉得自己可以稍后再解决该祈求，则应当 提供一种Retry-After头（HTTP 1.1新）。414Request URI Too LongURI太长（HTTP 1.1新）。416Requested Range Not Satisfiable服务器不能满足客户在祈求中指定的Range头。（HTTP 1.1新）500Internal Server Error服务器遇到了意料不到的状况，不能完毕客户的祈求。501Not Implemented服务器不支持实现祈求所需要的功能。例如，客户发出了一种服务器不支持的PUT祈求。502Bad Gateway服务器作为网关或者代理时，为了完毕祈求访问下一种服务器，但该服务器返回了非法的应答。503Service Unavailable服务器由于维护或者负载过重未能应答。例如，Servlet也许在数据库连接池已满的状况下返回 503。服务器返回503时可以提供一种Retry-After头。504Gateway Timeout由作为代理或网关的服务器使用，表达不能及时地从远程服务器获得应答。（HTTP 1.1新）505HTTP Version Not Supported服务器不支持祈求中所指明的HTTP版本。（HTTP 1.1新）