web应用开发-最新版Dojo1.7的dojox/mobile开发移动设备web应用

发布时间：2017-09-21 所属栏目：移动开发

一 : 最新版Dojo1.7的dojox/mobile开发移动设备web应用

使用最新版本Dojo1.7的dojox/mobile开发移动设备web应用

在线演示本地下载

随着科技的进步，越来越多的javascript类库开发出了面对移动设备的类库，例如，jQuery Mobile，Secha touch等，随着Dojo最新版本1.7的发布，同样的也带来了Dojo版本的移动开发框架Dojox/mobile。这套框架使用基于controller和CSS3主题的架构，帮助你快速的开发智能，灵活并且跨平台的移动设备web应用。

在今天我们这篇文章，将介绍如何使用Dojox/mobile来开发一个简单的移动网站应用。记得前段时间我们发布的使用jQuery创建iphone风格的导航吧，这里我们使用dojox/mobile也实现一个类似的效果。

关于dojox/mobile

相关特性：

1.轻量级，依赖性非常小

2.提供了iOS，Andriod和Blackberry的主题可供你选择

3.使用基于CSS3的动画来展示

4.提供了iOS，Andriod和Blackberry不同风格的组件

5.如果不支持CSS3的话，会使用javascript作为fallback

6.支持横竖屏幕切换

7.完整的组件支持，无须其它

8.新加入Dojo1.7中，最棒的地方在于能够自动侦测客户端并且显示正确的主题，当然你可以关闭这个功能

9.新加入Dojo1.7中一些组件，提示条，悬浮窗口，组合框，可扩展textarea，分页，滑动块等，完整信息请查看：http://livedocs.dojotoolkit.org/releasenotes/1.7#mobile

主要页面结构

和一般web应用类似，dojox/mobile也精心设计了相关结构。包括：

1.DOCTYPE

2.META标签

3.Body元素

代码结构如下：

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <title>dojox/mobile Demo</title>
        
    </head>
    <body>
        
    </body>
</html>

接下来我们添加dojo js，如下：

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js" data-dojo-config="async: true"></script>
<script type="text/javascript">

require(["dojox/mobile/parser", "dojox/mobile", "dojox/mobile/deviceTheme", "dojox/mobile/compat", "dojo/domReady!"], function(parser) {
parser.parse();
});

</script>

以上代码中，我们引用了dojo类库，并且使用AMD方法，加载了dojox/mobile和相关其它类库。

其中dojox/mobile/parser和dojox/mobile是必须包含的。其次加载了dojox/mobile/deviceTheme，用来生成不同主题。最后我们加载dojox/mobile/compact，使用它来保证如果不支持css3动画，将使用javascript来替代，这个不是必须要的，但是为了不同设备的兼容性，我们还是需要添加。

视图和组件处理如下：

1.View是类似页面的定义

2.Scrolling view是可滚动的页面

3.Button：按钮

4.Listitem：列表内容

5.Switch：开关组件

6.更多请查看文档

下面代码我们创建了一个简单view：

<div id="home" data-dojo-type="dojox.mobile.View" data-dojo-props="selected: true">
   <h1 data-dojo-type="dojox.mobile.Heading">Dojo/Mobile GBin1.com</h1>
   <ul data-dojo-type="dojox.mobile.RoundRectList">
    <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="icon:'img/icon.jpg', rightText:'查看', moveTo: 'article'">
     最新文章
    </li>
    <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="icon:'img/icon.jpg', rightText:'查看', moveTo: 'tutorial'">
     专题教程
    </li>
    <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="icon:'img/icon.jpg', rightText:'查看', moveTo: 'technology'">
     技术开发
    </li>
    <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="icon:'img/icon.jpg', rightText:'查看', moveTo: 'icon'">
     设计素材
    </li>
    <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="icon:'img/icon.jpg'">
     阅读配置
     <div class="mblItemSwitch" data-dojo-type="dojox.mobile.Switch"></div>
    </li>
   </ul>
</div>

这里定义了dojo-type，dojo-props，大家可以看到和jQuery mobile类似，使用data属性定义不同内容。

完整代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="article" id="articlelink" content="/technology/jquerymobile/20120814-dojo-mobile/" />
  <title>dojox/mobile Demo</title>
  <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js" data-dojo-config="async: true"></script>
  <script type="text/javascript">

   require(["dojox/mobile/parser", "dojox/mobile", "dojox/mobile/deviceTheme", "dojox/mobile/compat", "dojo/domReady!"], function(parser) {
    parser.parse();
   });

  </script>
</head>
<body>

  <div id="home" data-dojo-type="dojox.mobile.View" data-dojo-props="selected: true">
   <h1 data-dojo-type="dojox.mobile.Heading">Dojo/Mobile GBin1.com</h1>
   <ul data-dojo-type="dojox.mobile.RoundRectList">
    <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="icon:'img/icon.jpg', rightText:'查看', moveTo: 'article'">
     最新文章
    </li>
    <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="icon:'img/icon.jpg', rightText:'查看', moveTo: 'tutorial'">
     专题教程
    </li>
    <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="icon:'img/icon.jpg', rightText:'查看', moveTo: 'technology'">
     技术开发
    </li>
    <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="icon:'img/icon.jpg', rightText:'查看', moveTo: 'icon'">
     设计素材
    </li>
    <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="icon:'img/icon.jpg'">
     阅读配置
     <div class="mblItemSwitch" data-dojo-type="dojox.mobile.Switch"></div>
    </li>
   </ul>
  </div>

  <div id="tutorial" data-dojo-type="dojox.mobile.View">
   <h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props="back:'首页', moveTo:'home'">专题教程</h1>
   <ul data-dojo-type="dojox.mobile.RoundRectList">
    <li data-dojo-type="dojox.mobile.ListItem">
     <a href="http://www.gbin1.com/tutorials/html5-tutorial/html5-introduction">GBin1专题之HTML5教程 - 第一篇：HTML5介绍</a>
    </li>
    <li data-dojo-type="dojox.mobile.ListItem">
     <a href="http://www.gbin1.com/tutorials/html5-tutorial/html5-new-elements">GBin1专题之HTML5教程 - 第二篇：HTML5元素</a>
    </li>
    <li data-dojo-type="dojox.mobile.ListItem">
     <a href="http://www.gbin1.com/tutorials/html5-tutorial/html5-video">GBin1专题之HTML5教程 - 第三篇：HTML5 Video元素</a>
    </li>
   </ul>
  </div>


  <div id="technology" data-dojo-type="dojox.mobile.View">
   <h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props="back:'首页', moveTo:'home'">技术开发</h1>
   <ul data-dojo-type="dojox.mobile.RoundRectList">
    <li data-dojo-type="dojox.mobile.ListItem" >
     <a href="http://www.gbin1.com/technology/html/20120521html5-tutorials-new-feature">强烈推荐：GBin1专题教程之HTML5新特性系列</a>
    </li>
    <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="rightText: '2h 40m'">
     <a href="http://www.gbin1.com/technology/html/20120417html5draganddrop">分享一个HTML5的drag and drop API实现的图片拖拽分组效果</a>
    </li>
   </ul>
  </div>

  <div id="icon" data-dojo-type="dojox.mobile.View">
   <h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props="back:'首页', moveTo:'home'">设计素材</h1>
   <ul data-dojo-type="dojox.mobile.RoundRectList">
    <li data-dojo-type="dojox.mobile.ListItem" >
     <a href="http://www.gbin1.com/tools/icon/20120706freebieuikit">免费资源下载：两套超棒的UI界面设计素材集</a>
    </li>
    <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="rightText: '2h 40m'">
     <a href="http://www.gbin1.com/tools/icon/20120705-dark-searchbox">免费资源下载：暗色色系的超棒搜索框和下拉菜单UI欣赏</a>
    </li>
   </ul>
  </div>


  <div id="article" data-dojo-type="dojox.mobile.View">
   <h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props="back:'首页', moveTo:'home'">文章内容</h1>
   <ul data-dojo-type="dojox.mobile.RoundRectList">
    <li data-dojo-type="dojox.mobile.ListItem" >
      请参考在线演示查看效果，希望大家喜欢这个简单的效果！
    </li>
   </ul>
  </div>

</body>
</html>

相对jQuery来说，Dojox/mobile还比较简单，支持的主题比较少，配置好像更简单。

如果你用不同的移动设备查看演示，你可以看到不同的主题。

希望大家喜欢dojo mobile，你如果有任何想法，请给我们留言，谢谢！

来源：使用最新版本Dojo1.7的dojox/mobile开发移动设备web应用

二 : Vaadin Web应用开发教程(24):UI组件-ProgressIndicator组件

ProgressIndicator组件显示进程条，ProgressIndicator组件定时向服务器查询其当前值，如果值有变化，则更新进程条进度。Web应用本身无需实现任何查询服务器的操作，查询由ProgressIndicator组件自动完成。
ProgressIndicator组件的值域为0.0到1.0之间。缺省的查询(polling)间隔为1秒，可以使用setPollingInterval 修改。

[java]
// Create the indicator
final ProgressIndicator indicator =
new ProgressIndicator(new Float(0.0));
main.addComponent(indicator);

// Set polling frequency to 0.5 seconds.
indicator.setPollingInterval(500);

// Create the indicator
final ProgressIndicator indicator =
new ProgressIndicator(new Float(0.0));
main.addComponent(indicator);

// Set polling frequency to 0.5 seconds.
indicator.setPollingInterval(500);

ProgressIndicator组件通常用来显示一些耗时操作（比如下载文件）的进度。使用setValue 为ProgressIndicator组件设置当前值。
下面代码模拟一个费时操作提供ProgressIndicator组件显示进度。

[java]
// Create an indicator that makes you look busy
final ProgressIndicator indicator =
new ProgressIndicator(new Float(0.0));
main.addComponent(indicator);

// Set polling frequency to 0.5 seconds.
indicator.setPollingInterval(500);

// Add a button to start working
final Button button = new Button("Click to start");
main.addComponent(button);

// Another thread to do some work
class WorkThread extends Thread {
public void run () {
double current = 0.0;
while (true) {
// Do some "heavy work"
try {
sleep(50); // Sleep for 50 milliseconds
} catch (InterruptedException e) {}

// Show that you have made some progress:
// grow the progress value until it reaches 1.0.
current += 0.01;
if (current>1.0)
indicator.setValue(new Float(1.0));
else
indicator.setValue(new Float(current));

// After all the "work" has been done for a while,
// take a break.
if (current > 1.2) {
// Restore the state to initial.
indicator.setValue(new Float(0.0));
button.setVisible(true);
break;
}
}
}
}

// Clicking the button creates and runs a work thread
button.addListener(new Button.ClickListener() {
public void buttonClick(ClickEvent event) {
final WorkThread thread = new WorkThread();
thread.start();

// The button hides until the work is done.
button.setVisible(false);
}
});

扩展：com.vaadin.ui / progress indicator / kendo.ui.progress

三 : iPhone Web 开发应用（上篇）

iPhone Web开发应用是本文要介绍的内容，上面也讲到了iPhone被设计为不允许安装任何第三方应用程序（破解不在讨论范围之内），一切第三方应用程序必须以Web的形式来跑，那么，在这也不多说，我们先来看内容。

iPhone Web 应用程序布局入门

用过iPhone的朋友应该知道，iPhone上面的一些应用程序是能够随机器转动自动适应的，也就是说竖着拿的时候就竖着显示，横着拿的话就横着显示，iPhone中至关重要的Safari浏览器当然也支持这一点了，因此我们考虑设计iPhonefriendly的应用程序时，首先要考虑兼容这种情况，不能把页面定死在一个宽度上。

且慢，我们不是说设计自己的应用程序吗？这和内置的Safari有何关系？iPhone被设计为不允许安装任何第三方应用程序（破解不在讨论范围之内），一切第三方应用程序必须以Web的形式来跑，小到一个国际象棋的游戏也如此，因此我们现在说的应用程序就是指Web，但是与传统意义上以提供信息为核心的Web又不同，我们所说的是以提供交互操作为主的应用。

好吧，在我们正是进入布局的讨论之前，先来赏析一下已有的iPhone应用：

Facebook iPhone Edition

Facebook的iPhone版。如果你已经习惯了在iPhone上使用过Facebook，第一次在PC上浏览这个页面会被它的“肥大”吓坏的。从这个页面我们能够得知，让页面自动适应iPhone屏幕的方法就是尽量使用百分比来定义宽度，特别是全页宽度一律用100%，如果是导航栏里面4个项目并排的就每个25%。

AppMarks

AppMarks可以说是一个应用程序的书签，当然也有人把它作为Safari的首页，那就相当于桌面了，因为你收藏的应用程序就在这个页面直接显示，以大图标的方式。AppMarks以前是可以直接在PC上浏览的，现在已经自动将非iPhone的请求重定向到介绍页了，不过这里有一个AppMarks Demo能在PC上看看。我们能够看得到图片是4个一行地排列的，共12个，然而横屏会怎样了？当然是变成6个一行，仍然能够在一屏内显示完，并且不会有不满行的图标。其实这是一个很tricky的做法，12是4和6的公倍数，因此虽然竖屏和横屏的显示方式不一样，但你不会觉得有什么缺陷。

Newsgator Mobile iPhone Edition

终于有一个ASP.NET写的iPhone应用了，其实和上面的Facebook看起来差不多，同样采用了宽度为100%的做法，同时页面上的元素要么向左对齐要么向右对齐。这听起来很废话，其实意思是，中间尽管留空，不要想把整个宽度为100%的块区都利用起来，说明性文字可以放左边，操作及视觉反馈放右边，这样无论屏幕怎么旋转都好看。如果中间塞满了内容，只会让Safari进行比例缩放操作，把页面整个缩小，这其实是不利于操作的。

GMail

这不是普通的GMail吗？怎样才能看到iPhone版？这就需要通过修改user-agent属性欺骗它了。iPhone上的Safari所用的user-agent如下所示：

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3

使用Firefox的User Agent Switcher修改一下user-agent就行了，然后你就能看到iPhone上看到的GMail了。仍然和上面的网站一样，可点击区域是一大个宽度为100%的块区。

实际上，设计iPhone friendly的界面，在CSS的层面上来说一点也不难，甚至可以说是非常简单，因为基本上就是宽度为100%的块区，少数时候要用到按百分比划分的块区，但实际上我们也应该避免这种情况。为什么呢？别忘记了，iPhone的用户是没有鼠标的，他们必须通过手指来操作页面上的一切，因此可点击区域必须尽量大。

既然他们看不到鼠标指针，你也就不用考虑可点击区域必须是链接或者cursor: pointer，因为用户无法通过鼠标指针的改变来判断一个区域是否能点击。然而这同时也就引入了另一个问题，如何让用户了解一个区域能否点击呢？这时候你必须给出明确的视觉暗示，例如看起来是链接的文本，蓝色的文本有无下划线通常都挺诱惑人去点，这方面Facebook是一个例子。另一种做法是让界面看起来是菜单式的，好像AppsMarker和Newsgator那样，菜单右侧的符号让人挺熟悉不是吗？只要我点击这个菜单项，就会展开下一级菜单。最后一种做法就是基于用户已经熟悉的独创暗示来提示用户，习惯使用GMail的用户一看到邮件标题那个大大的蓝色区域，就知道点击是打开邮件，这是不需要任何指引的，最坏的情况下，用户不知道点击什么还是会点击邮件标题，之后他也就会用了。

iPhone Friendly 的 Web 应用程序 Viewport

在了解到iPhone的一些常见布局法后，我们就可以开始着手编写一个真正能在iPhone上跑的页面了。小声说一句，之前我说要布局讨论完了，要进入交互逻辑开发，后来细心一想发现不行，有些东西不讲的话将会对布局带来问题，绕过去的话并不怎么优雅，因此继续讲布局。

首先要说的就是viewport，也就是可视区域。对于桌面浏览器，我们都很清楚viewport是什么，就是出去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域，这是真正有效的区域。（无论你屏幕多大，如果你装足够多的toolbar，你的viewport最终也会消失掉。）在桌面浏览器中，viewport的大小是与浏览器窗口大小直接相关的，窗口大了viewport自然就大，同时随着viewport的改变，页面布局可能也跟着变。例如width: 100%的页面宽度就总是和viewport宽度一致。

然而iPhone的Safari不是这样理解viewport的，它基于viewport呈现页面，然后用户缩放页面后viewport保持不变，仅仅是页面内容按比例缩放了。举个例子，在不设置viewport的情况下，默认viewport为宽度980（单位是像素），这时候页面的呈现出来的布局和在桌面短viewport宽度为980时呈现的结果一致，然而因为iPhone屏幕宽度为320，因此按比例缩小了。因此，一张宽度为320的图片，在默认viewport下会这样显示：

可以看到，图片按比例缩小了，这对于传统Web页面直接在iPhone上面显示来说是很好的事情，因为如果传统Web页面在980宽度的桌面浏览器viewport中显示正常的话，iPhone上显示也绝对正常。然而这对于Web应用程序来说则不是好事，因为我们需要按照980宽度来设计将来会以320宽度显示的页面，一个应该显示为320*80的元素，必须设计为980*245，这多麻烦！
因此我们需要改变viewport，让它变成这样：

实际上应该怎么做呢？我们有几个选择，因此先让我们看看到底我们能够设置哪些属性吧。我们可以操作的属性有4个：

width - viewport的宽度

height - viewport的高度

initial-scale - 初始的缩放比例

minimum-scale - 允许用户缩放到的最小比例

maximum-scale - 允许用户缩放到的最大比例

user-scalable - 用户是否可以手动缩放

这6个属性，我们可以设置其中的一个或者多个，iPhone会根据你设置的属性自动推算其他属性值，而非直接采用默认值。这点很重要，在完全不设置的时候有默认viewport，在你设置一个属性后其它值是自动推算出来的，不再是默认的。

如果你把initial-scale=1，那么width和height在竖屏时自动为320*356（不是320*480因为地址栏等都占据空间），横屏时自动为480*208。

类似地，如果你仅仅设置了width，就会自动推算出initial-scale以及height。例如你设置了width=320，竖屏时initial-scale就是1，横屏时则变成1.5了。

那么到底这些设置如何让Safari知道？其实很简单，就一个meta，形如：

<metaid="viewport"name="viewport"content="width=320;initial-scale=1.0;maximum-scale=1.0;user-scalable=0;"/>

在设置了initial-scale=1之后，我们终于可以以1:1的比例进行页面设计了。下一步我们就可以正式进入页面布局的细节设计了。如果你想继续关注iPhone，请继续阅读下一篇文章。

小结：关于iPhone Web开发应用（上篇）的内容介绍完了，希望本文对你有所帮助，如果你想继续关注iPhone，请继续阅读下一篇文章：iPhone Web 开发应用（下篇）。

四 : 深度技术用户三分钟开发一个Web托管Win10应用官方图文教程

在最近的一篇博文中，微软讲解了如何通过Windows App Studio快速构建一个Web托管Win10应用，可同时运行在Win10 Mobile/PC设备中。Windows App Studio是微软为不具备相关编程经验的用户推出的一种在线服务，通过简单的操作就可以将Web应用打包发布到应用商店。

微软官方图文教程：三分钟开发一个Win10应用

Windows App Studio适用于所有Web应用，所有操作都通过浏览器进行，套用提供的应用模版，然后添加数据和服务，根据自己的需求自定义应用主题选项。最终可导出Visual Studio工程文件，或者直接生成安装包发布到应用商店。

微软表示这只需要花费很少的时间，甚至只需要三分钟，步骤简单总结为：

• 创建一个工程；

• 命名工程：

• 填写URL地址；

• 生成和发布；

具体如下：

1、创建工程

点此进入Windows App Studio创建工程页面，你需要使用微软账户登录。在该页面你会看到Hosted Web App选项，如下图所示：

点击Hosted Web App，之后会弹出弹窗，在这里输入应用的名称，然后点击“Start with this one!”，在右侧会显示在不同设备中的预览。

2、配置应用

创建项目之后会进入应用内容编辑页面，在这里你只需要填写你的Web应用的地址即可。

在这里你还可以上传一个自定义的应用清单文件Manifest，这是一个JSON数据文档，里面包含了应用启动参数之类的配置。你还可以定义额外的URI规则以及设备屏幕旋转属性等，但这些都是可选的。

在右侧的设备预览画面中会出现应用的预览效果，有时候这里不显示内容，这很可能是页面不支持iframe嵌入，不过一般来说都不会有问题。

填写好URL地址后，你需要为应用更换一个Logo。点击导航栏中的Logo，如下图所示：

然后点击App logo标题下方的图标，就可以上传自己准备好的应用Logo了，上传后会自动生成所需的不同尺寸图标。

之后点击Settings，编辑与应用商店相关的一些信息，包括应用描述、语言等信息。填写完成后，点击“Save”保存。

3、生成应用

配置好应用之后，点击右上角的“Finish”按钮，之后会进入应用预览页面，针对不同形态的设备进行预览。最后只需要点击“Generate”生成按钮，然后在弹出的窗口中选择生成类型（默认选择为Visual Studio解决方案），最后再点击“Generate”即可。

就是这样简单，完全不需要编辑代码。手里头有Web应用项目的同学可以尝试一下。

五 : Web开发者应该掌握的12个Firebug使用技巧

相信很多从事Web开发工作的开发者都听说和使用过Firebug，但可能大部分人还不知道，其实它是一个在网页设计方面功能相当强大的编辑器，它可以对HTML、DOM、CSS、HTTP和Javascript进行全面的跟踪和调试。它是Firefox浏览器的一个插件，所以建议各位Web开发者，要充分利用FireFox浏览器和Firebug插件进行日常的调试工作。本篇经验选取了12个Web开发者应该掌握的Firebug的初级使用技巧，介绍给大家。

1、使用Firebug可以找到页面中的任何内容

不知道各位有无遇到过这样的情况，在一个复杂的HTML页面中，当你想找某个页面元素的实际对应的HTML时，你不得不在一大堆HTML代码中去查找，十分麻烦。有了Firebug，现在你只需要在页面中，用鼠标右键选中某个元素，然后在弹出的菜单中，选择“查看元素”，马上就会在HTML页面代码中找到该元素对应的代码了，十分方便，如下图所示：

2、可以使用Firebug修改HTML和CSS

通过Firebug，可以直接修改HTML，增加HTML的属性，删除元素，增加CSS样式及实现更多功能，如下图所示：

3、可以通过Firebug查看DOM元素和对XML进行操作

当打开一个HTML页通过Firebug查看HTML代码时，你可以同时点在控制面板中的DOM树，就会以DOM的树型结构方式看到整个HTML的结构。而如果你是打开了一个XML文件，那么鼠标右键点XML文件中的任何一个元素，在弹出的菜单中同样可以选择对XML进行相关操作，如下图所示：

4、使用Firebug调试Javascript代码

在Firebug控制台中，如果要执行调试Javascript代码，只需要首先将Script控制面版启动，然后在点击Console按钮，在下拉菜单中选择显示Javascipt及HTML错误(还可以让用户选择显示更多的错误)，接着在底部会发现出现>>>的箭头，在这里，你可以输入Javascipt代码，输入后，马上按回车键，就可以执行了，十分方便，如下图所示：

5、多次加载页面后Firebug会记得加载前的位置

无论你重复加载多少次页面，Firebug在每次加载页面后总会自己记得加载前页面所在的位置(比如你已经在浏览页面的底部，此时再加载页面，则新的页面加载后，依然把你带到页面底部)。

6、使用$标记去方便访问变量

在上面的第4点中，我们提到了在>>>这个命令行下可以进行Javascript的调试，而另外一个技巧是可以使用如$1去访问曾经访问过的变量中的最后一个，如此类推，可以使用$2访问曾经访问过的变量中的倒数第二个，如下图所示：

7、Firebug会高亮度显示修改过的内容

在Firebug中，只要你修改过页面中的内容，就会以黄色高亮度显示曾经修改过的内容，如下图所示：

8、监视Javascript的运行性能

在Firebug中，你可以点控制台中的“profile(概况)”选项，这将开启Firebug的性能监视功能，之后你可以进行页面的一系列操作，当再次点profile按钮后，将停止对性能的监测活动，接着Firebug会显示一个列表，其中会清楚列明操作过程中所涉及的函数，调用次数，占用时间、平均时间，最小时间，最大时间等，如下图所示：

9、Firebug强大的网络数据监视功能

Firebug还提供了十分功能强大的网络数据监功能。开发者在开发web应用时，经常要观察各类HTTP请求和回应，在这方面Firebug的功能十分强大。首先，只需要开启控制面板中的网络功能，然后在每次运行页面时，都可以清楚看到每个HTTP的请求和HTTP回应的具体细节，如下图所示：

10、使用Firebug的Log功能

在设计页面时，经常要记录下页面的一些信息，这个时候，可以使用Firebug中的log日志功能，把一些信息输出到firebug的控制台中，这样就方便调试了。Firebug提供了一个console对象，在插件加载的时候就注册到Javascript的运行环境中去了，可以在程序中直接使用。console对象提供了一个log方法。在Firefox中执行如下代码，会看到Firebug的控制台中出现如下信息，如下图所示：