chrome 开发模式应用技术巧(from www.sysoft.cc)

我是一名忠实Chrome迷,使用它已经快有2年的历史了,整体给我的感觉就是清爽,快速,简洁。又打小广告了……^_^,虽然我知道IE8+也有调试工具,包括火狐的什么XXBUG,但是我用过之后,个人还是十分偏爱chrome的debug。

chrome对于在前端打拼的兄弟姐妹是十分有帮助的,它优雅的实时展示DOM,捕获N个ajax传递过来的参数

查看动态DOM

获取ajax请求数据预览

包括chrome中N多插件……

当然我在这里列举一个十分有用的javascript调试的技巧

首先请打开“谷歌浏览器”(废话),然后打开一个网页,按“F12”会出现一个控制台,找到一个叫做“Sources”,点击它

OK,如果你的页面现在已经加载过JS脚本的话,那么应该可以看到一些JS文件了

然后你可以在左侧侧栏的序号那些位置点击一下就设置成断点,当你要执行某个函数的时候浏览器就会自动进入调试模式了

细心的你肯定会发现Scope Variables区域显示的竟然就是Object对象的元素,大惊。起初我们要想展示一个对象要么采用


1

2

3

4

5

function forIn(o) {

    for (i in o) {

        document.write(‘<strong>‘ + i + ‘ --></strong> ‘ + o[i] + ‘<br />‘);

    }

}

你会发现页面很麻烦,而且也不是很灵活,现在学会chrome的debug工具我相信会给你带来莫大的帮助了。

==2013-11-02更新==

当我们在打开chrome的时候,你就已经被google至简给深深吸引,到现在chrome的版本已经到了 30.0.1599.101 m,google的东西确实很赞。

好滴,我补充一些我后来慢慢用到的内容给大家,算是我自己的工作笔记吧。

一般我们打开的大部分的网站有些js文件是已经被yui\uglifyjs等js压缩工具压缩过的代码,让你看格式来进行调试十分不容易(根本就不可能)。chrome中也提供了一个格式化代码的功能。

点击图上圈红(pretty print)的按钮立即将当前文件进行标准格式了。我啰嗦一句,这个格式化代码目前我只知道能格式化dom和js,css文件没有格式化效果当然也就不支持了。

关于js调试的几个控制简介

js控制面板就是在顶部的侧面板,这几个工具条可以让你按步执行代码。

继续:继续执行代码,直到我们遇到另一个断点。

步骤:忽略方法体内部,也就是不进入到方法体内部细节再执行,只调用取返回值继续在当前执行下步。

进入细节:细节逐语句执行,进入方法体再执行。

退出细节:细节语句返回主函数体。

断点开关:决定该断点是否开启/关闭。

上面这些内容只是一些粗略的手记,如果你需要更加深入的了解chrome的DevTools不妨来这里,这里绝对是一手资料而且十分详细和权威,如果你有幸被墙,那么恭喜你,你要学会怎么搭建梯子,这个问题你可以google或者度百。

时间: 2024-11-03 14:37:48

chrome 开发模式应用技术巧(from www.sysoft.cc)的相关文章

JavaWeb——EL技术,JSTL技术,JavaEE开发模式

EL技术 EL(Express Lanuage)表达式可以嵌入在jsp页面内部,减少jsp脚本的编写,EL出现的目的是要替代jsp页面中脚本的编写. EL最主要的作用就是从域中取出数据,格式${EL表达式} EL获得pageContext域中的值:${pageScope.key}; EL获得request域中的值:${requestScope.key}; EL获得session域中的值:${sessionScope.key}; EL获得application域中的值:${applicationS

动态页面技术----EL技术、JSTL技术,javaEE的开发模式

1 EL技术 1.1 EL 表达式 EL(Express Lanuage)表达式可以嵌入在jsp页面内部,减少jsp脚本的编写, EL出现的目的是要替代jsp页面中脚本的编写,就是简化java代码. 1.2 EL最重要的作用:从域中取出数据 jsp脚本:<%=request.getAttribute(name)%> EL表达式替代上面的脚本:${requestScope.name} 1.2.1获得四大域中的数据 格式 ${EL表达式} EL获得pageContext域中的值:${pageSco

Chrome 开发工具指南

Chrome 开发工具指南 谷歌 Chrome 开发工具,是基于谷歌浏览器内含的一套网页制作和调试工具.开发者工具允许网页开发者深入浏览器和网页应用程序的内部.该工具可以有效地追踪布局问题,设置 JavaScript 断点并可深入理解代码的最优化策略. 适用人群 这篇教程将会带你从头开始使用学习如何利用 Google 提供的组件进行 Chrome 上的相关开发调试工作. 通过本教程,你将学会如何使用这些工具,并且学会如何通过它来分析调试提供的 Demo . 学习前提 在你继续本教程之前,你必须对

大搜车前端开发模式:被动编译和主动编译

最近,梳理了一下公司的前端开发体系,准备给已经工作一年多的原有体系引入一些新的开发模式,其实也不算新了,只是对于我们一直采用的模式来说,是两个完全不同的方向,以前,我崇尚简单,一直按照简单易用的理念构建了公司现有的前端开发体系,现在随着人数的增多和业务的复杂度提升,感觉是时候引入一些差异化的开发体系了. 说来说去有点绕的慌,上面一段中说的 传统的开发模式,在团队内部我们叫做 被动编译,而新的开发方式,在团队内部叫做 主动编译. 被动编译 可能很多人对于被动编译都不是很熟悉,因为这种开发方式现在并

javaweb学习总结(二十一)——JavaWeb的两种开发模式

SUN公司推出JSP技术后,同时也推荐了两种web应用程序的开发模式,一种是JSP+JavaBean模式,一种是Servlet+JSP+JavaBean模式. 一.JSP+JavaBean开发模式 1.1.jsp+javabean开发模式架构 jsp+javabean开发模式的架构图如下图(图1-1)所示 图1-1 在jsp+javabean架构中,JSP负责控制逻辑.表现逻辑.业务对象(javabean)的调用. JSP+JavaBean模式适合开发业务逻辑不太复杂的web应用程序,这种模式下

Java Web开发模式

一 Java Web开发模式的变迁 1 最初的Java web服务器端编程技术是Servlet,利用Servlet就可以开发出一个Web应用程序. 2 为了解决Servlet缺陷,SUN推出了JSP技术.但是开发人员又走向了另一个极端就是完全放弃了Servlet. 在JSP页面混合使用HTML标记和java代码编写的脚本元素标记来开发Web程序.采用这种方法虽然可以编写JSP页面变得简单,直观,然而,他只适合于业务流程简单,系统规模较小的应用系统. 如果系统较大的话,就会出现两个严重的缺点: 1

.NET简谈插件系统开发模式

摘选自[王清培]博客 http://www.cnblogs.com/wangiqngpei557/archive/2011/06/10/2077413.html 今天跟大家分享一下我们在日常开发中并不常用的开发模式“插件系统模式”,什么叫插件,从大一点的概念讲就是我们开发的软件是由很小的模块组成,每一块都能成功的装卸,使我们的软件成为一个有机体,在发生重大事故.改良优化等等的时候,我们不需要重新编译我们的系统就能很方便的进行升级替换进行使用:这样的开发模式就是插件系统开发模式:这个概念很大,每个

浅谈开发模式及架构发展

一.传统开发模式 传统的开发模式基本一般是重服务端的开发方式,大部分工作都在服务端执行,然后返回到客户端(通常是HTML).以Asp.net MVC为例,如下图: #1 根据请求的路由定位到对应的Controller的对应的Action. #2 执行相关逻辑,得到结果Model(也可能没有Model,如直接返回View). #3 定位并加载对应的View(也可能没有View,如返回TextResult,JsonResult等). #4 在服务端通过Razor引擎把Model和View绑定起来生成

开发模式

许多 利用ajax j2ee开发组织机构 重要的技术和AJAX开发模式可以从现有的知识中获取.例如,在一个发送请求到服务端的应用中,必须包含请求顺序.优先级.超时响应.错误处理及回调,其中许多元素已经在Web服务中包含了.同时,随着技术的成熟还会有许多地方需要改进,特别是UI部分的易用性. AJAX开发与传统的C/S开发有很大的不同.这些不同引入了新的编程问 题,最大的问题在于易用性.由于AJAX依赖浏览器的JavaScript和XML,浏览器的兼容性和支持的标准也变得和JavaScript的运