FireBug调试工具笔记 - 革新

本邮件内容由第三方提供，如果您不想继续收到该邮件，可 点此退订 。

FireBug调试工具笔记 - 革新  阅读原文»

Firebug是网页浏览器 Mozilla Firefox下的一款开发类插件， 现属于Firefox的五星级强力推荐插件之一。它集HTML查看和编辑、Javascript控制台、网络状况监视器于一体，是开发 JavaScript、CSS、HTML和Ajax的得力助手。Firebug如同一把精巧的瑞士军刀，从各个不同的角度剖析Web页面内部的细节层面， 给Web开发者带来很大的便利。例如 Yahoo! 的网页速度优化建议工具 YSlow。下面咱们就来学习FireBug工具的使用。如有错，望提出修改意见。

1.编辑HTML

a.鼠标选中某个html元素，修改相关属性，即可在页面中动态的显示出来

b.点击小甲虫右侧的箭头按钮，就可以在页面中点击某个元素，FireBug中的就会定位到这个元素的html代码中。

当然，可以使用快捷键。ctrl+shift+c如果需要查看或者修改快捷键的话，可以点击小甲虫图标，在弹出的菜单中选中“自定义快捷键”，在弹出的界面中查看和修改即可。

c，当需要编辑html代码的时候，我们有两种方式，一种是双击html代码，即可对html代码进行修改，还有一种是右键，点击“编辑”页面，进入编辑页面，这个时候，我们实时的编辑，变化都会反映在页面上。

2.处理css

在html代码的右侧，是css属性页面

a.点击html代码，即可看到他的css属性，我们可以在样式中移动鼠标可以看到css样式中字体的大小，图片和颜色等。

双击css即可进行修改，如果需要添加样式，则只需要在空白的地方就可以新建样式，当然，我们也可以禁用样式，当我们用鼠标移动到样式上的时，点击出现的禁用按钮即可禁用样式。

如果要删除某些样式，则只要双击样式，样式变成可输入状态时，按住键盘delete键即可。

b.当我们需要修改一些属性是数值的类型的样式的时候，我们可以按住键盘的上下键，即可实现微调样式，省去我们每次输入的时间。如果需要调整0.1个单位的话，那我们只需要按住ctrl键，再用键盘上下键，即可实现数值样式的精度更细的微调。如果需要大幅调整的话，则只需要按住shift键，再用键盘上下键，就可以每次以10个单位调整。如果需要调整很多css代码，则只需要点击右侧的css，即可直接编辑css代码。

c.最右侧的计算出样式，可以看到计算出来的css样式。布局：我们可以看到盒子模型的布局。DOM:我们可以查看整个页面的DOM节点2事件：我们可以查看当前页面中的事件。

3.评估页面下载的速度

点击firebug面板中的网络，在载入页面的时候，即可看到整个页面的网络情况。

在这个页面中，我们可以看到每个元素所下载的时间，请求方式，状态、html、css、js等等。

我们可以通过时间线来评估整个页面的下载时间，我们可以单击请求，即可查看这些请求的一些信息。请求头信息里，我们可以看到请求头信息，响应头信息、和响应结果。

4.ajax请求

当我们输入ajax请求的时候，XHR就可以监听每一次的ajax请求。

ajax中的参数就是我们传入或者post的一些名字和字符，头信息是我们请求的头信息。响应是从服务器中返回回来的我们所接受到的信息。这些信息，在开发中我们可以检查请求是否发出，结果是否返回，返回的结果是否如我们的期望。

5.javascript控制台

a.javascript控制台中可以读取我们在js代码中的命令。比如：

for(var i=0;i<10;i++)

{

console.log(i);//这样，每次i值的变化我们都可以监听到

}

我们也可以使用这些信息

console.error(i); //错误信息

console.debug(i); //debug信息

console.info(i);//详细信息

我们也可以对日志信息进行分组：

console.group("first");

console.log("11111");

console.log("22222");

console.log("33333");

console.log("44444");

console.groupEnd();

console.group("second");

console.log("aaaa");

console.groupEnd();

当我们需要显示一个对象的所有属性和方法的时候，我们可以使用：

console.dir();

如：console.dir(console);

当我们需要测试某些代码的运行速度的时候我们可以使用console.time()函数来测试代码的运行速度：

6.js调试

当我们需要调试我们的代码的时候，我们可以通过面板中的“脚本”来调试我们的代码。

点击“脚本”，我们可以看到我们脚本的代码和当前的页面，我们可以对脚本代码设置断点，对代码进行调试

在调试的时候，我们可以点击断点，取消调试，

如果要查看函数的调用情况：我们可以在函数中使用console.trace();

当然，我们也可以使用“概括”来收集概括信息，

本文链接：FireBug调试工具笔记，转载请注明。

Android Wear开发 - 学习指南 - benhero  阅读原文»

Android Wear开发 - 学习指南

前言

本篇文章是本人对这这一阶段Android Wear的开发总结，主要是对之前写的关于Android Wear方面技术的梳理，便于新人更好地交流学习。

Android Wear究竟是什么？

Android Wear和手机是完全不同的设计理念：手机大多数情况下，都是用户去操作，去触发里面的应用；而手表则是"用户被动"的，用户越少感觉到你的存在，越是合理，而在某些场景下给予最合适的提醒，则是Android Wear最伟大的设计理念，这也是它想做到的。

Android Wear是智能的通知栏！-这是我对它的理解。

在早上醒来的时候，给你推送早上的天气、交通状况。在你到达餐馆的时候，给你推送大众点评，美团购物券，为你精打细算。检测到你的运动状态，显示计步器，心率状况(Android Wear本身内置)。当你在户外在检测到你的情绪焦灼，需要一解生理需要的时候，及时地给你推送最近的麦当劳(绝对的本地化啊！) :-D

233333333333

本人开始负责Android Wear模块的时候，需要进行它理念设计的学习以及调研，于是研读官方设计文档，所以对它的设计也有了一定的认识。而国内也有网站对这部分进行了翻译，建议读者在开发之前先了解下，Wear究竟是怎么样的一个产品。http://www.tuicool.com/articles/6vumqyQ

Android Wear开发阶段

产品需求方向的确定

很重要的是，产品要设计成什么样子？

1. 手机到手表的信息通知栏样式优化

2. 手机与手表的智能推送

3. 自定义卡片样式

4. 完全自定义界面，提供独特的交互

5. 手表表盘

技术实现

以上4个点，是设计到不同方面，不同层次的技术。要想清楚后，使用最恰当的技术去实现之。以下列出针对上面的实现需要的技术点

1. 手表通知优化：实现最简单，是非常有效的提升应用在手表上的显示

2. 智能推送：数据通讯，监控手表的状态，为界面展示提供更丰富的数据支持

3. 自定义卡片：保留官方提供的卡片流样式，个性化修改卡片内容

4. 完全自定义界面：自己实现界面，需要处理多分辨率问题，自由度高

5. 手表表盘：类似手机动态壁纸的机制

我的博客索引

开发平台搭建 ：

好的开始是成功的一半，认真阅读这边博客会避免后面的一些坑：http://www.cnblogs.com/benhero/p/4183322.html

卡片通知 ：

1. 手表通知优化：http://www.cnblogs.com/benhero/p/4211746.html

2. 自定义卡片：http://www.cnblogs.com/benhero/p/4217771.html

在学习自定义卡片通知之前，你可能需要学习数据传递这部分。

数据通讯：

1. 连接数据层：http://www.cnblogs.com/benhero/p/4138498.html

2. 数据的发送与接收：http://www.cnblogs.com/benhero/p/4138525.html

3. 事件监听：http://www.cnblogs.com/benhero/p/4138551.html

实战系列：

1. 解决数据封装：http://www.cnblogs.com/benhero/p/4220747.html

2. 应用打包 - 实现手机与手表的连接：http://www.cnblogs.com/benhero/p/4209056.html

后话

1. 完全自定义界面：这个模块和写普通手机界面差不多，并且多了几个组件，有兴趣的朋友可以看下官网这部分的教程

2. 手表表盘：其实本人对这个部分特别感兴趣的，电子市场上也出现了很多富有想法的表盘，看了就馋了，可因为项目某些不可抗拒的原因，不能继续这个模块的开发，有兴趣的朋友可以到官网教程学习

3. Android Wear API与标准手机API的差异：少了以下这些包的支持

• android.webkit

• android.print

• android.app.backup

• android.appwidget

• android.hardware.usb

本文链接：Android Wear开发 - 学习指南，转载请注明。

阅读更多内容