手机网页开发:远程控制台调试Javascript

工作中涉及微信和手机端页面开发比较多,手机上调试JS时没法进行控制台输出是一大憾事,还好遇到了jsconsole可以让开发者进行远程调试。加载jsconsole的调试代码后,所有的console.log()输出,都会传回到桌面浏览器中打开的远程控制台界面,你也可以在远程控制台查询页面里存在的DOM元素和JS变量,几乎具备一个完整的浏览器控制台的功能。

使用方法:

打开jsconsole的网页,会看到一个控制台的界面,显示了简单的帮助信息

jsconsole.com

要开始远程调试,首先要获取一个唯一的ID,然后把这段带有唯一标识的远程JS文件加载到你的页面中。

要获取唯一ID,只要在命令行输入:listen命令即可,控制台会返回给你一串HTML标签:

<script src="http://jsconsole.com/remote.js?17D2BF69-38A1-468A-BB96-72BC4A9F3CA0"></script>

把这段代码插入到你的页面<head>部分,然后访问你的页面就可以在远程控制台看到浏览的基础信息了。

使用Modernizr检测浏览器的HTML5和CSS3支持功能

什么是Modernizr

Modernizr 是一个用来检测浏览器功能支持情况的 JavaScript 库。 目前,通过检验浏览器对一系列测试的处理情况,Modernizr 可以检测18项 CSS3 功能以及40多项关于HTML5 的功能。 它比传统检测浏览器名称(navigator.userAgent属性)的方式更为可靠。 一整套测试的执行时间仅需几微秒。 此外,Modernizr 网站通过定制脚本只对你感兴趣的元素进行检测,从而实现效率优化。

怎么使用Modernizr?

网页中加载Modernizr后,会自动在<html>标签中插入 <html class=”no-boxshadow”>类似的CSS类名,你只要在CSS文件中事先写好 .no-boxshadow img{**} 时应该显示的样式就可以了。

Modernizr也会生成一个Modernizr对象,你可以通过检测Modernizr.geolocation是否为ture来判断浏览器支持地理位置与否。

更详细的介绍请参考:http://www.adobe.com/cn/devnet/dreamweaver/articles/using-modernizr.html

 

4+网页常用Javascript插件-个画廊和幻灯片

这期为大家推出的是:4个画廊和幻灯片插件

1、Slideshow 2 (幻灯片) 基于mootools框架的JS幻灯片插件,支持多种切换效果。 a
演示及下载:http://code.google.com/p/slideshow/

2、Galleria(基于JQuery)

简单实用的JS图片画廊 ,是通jquery编写的。

b
演示及下载:http://devkick.com/lab/galleria/

继续阅读“4+网页常用Javascript插件-个画廊和幻灯片”

6+网页常用Javascript插件-Lightbox图片展示灯箱

目前,两个常用的JavaScript框架是: jquerymootools 。利用它们你可以轻易的制做出各种复杂的页面效果,为了提高工作效率,蛋壳决定开始学习Jquery,下面是蛋壳找到的一些用框架实现的非常酷的页面效果,你可以很方便的应用到你的页面中。

这期为大家推出的是:6个图像放大和弹出插件

1、Lightbox (灯箱)

灯箱,是一种简单的脚本用来在当前页上弹出1个层来显示图像,支持目前所有浏览器
a
演示及下载:http://www.huddletogether.com/projects/lightbox2/

2、jQuery lightBox Plugin (基于JQuery)

这是完全一样的灯箱js ,是通jquery编写的。

演示及下载:http://leandrovieira.com/projects/jquery/lightbox/

继续阅读“6+网页常用Javascript插件-Lightbox图片展示灯箱”