调试selenium的扩展JS代码(FireFox中JavaScript调试工具)

目的

一般我们在调试单个网页时，所查看到的是此单个页面中的JS代码。如果JS代码运行在外挂插件中，就无法调试，此文的目的是：找到“调试所有被浏览器本身加载的或是任何后添加运行的JavaScript文件”的方法。

初始困惑

在给selenium IDE写扩展的时候一直在找调试它的方法。先说结论：使用Firefox自带的web开发者工具的浏览器工作箱即可，查看本文最后一节。

AJAX应用一直是很难调试。JS代码一直盲目地在web浏览器中执行，程序出错，反馈很少：比如臭名昭著的“null is null or not an object”的问题。

调试工具1：VenKman

selenium官方文档上介绍的软件，又名JavaScript debugger，Mozilla的JavaScript调试器。只在FF中工作，但是JS在大部分浏览器中都是相同的，所以在FF上调试起启示性作用。

功能点：

- 基本的语法检查

- 断点，检查上下文，stepping through，栈导航。

软件组成：

- Loaded Scripts panel，通过单击面板中JavaScript文件旁边的展开/关闭（expand/collapse）三角形，我们可以浏览文件中的不同函数。

- 局部变量面板（Local Variables panel）支持在代码执行时跟踪变量的值。

-Breakpoints panel Watch， 断点面板（Venkman调试器）的提供断点查看功能，并允许你指定何时开始调试、何时停止执行等操作

- 调用栈面板（Call Stack panel）显示了当前位于代码的哪个位置。通过这个窗口，我们常常可以判断出正在执行哪些函数以及哪个函数调用了这个函数。

- 交互会话面板（Interactive Session panel）提供了可以交互工作的命令行。输入/help可以获得命令帮助。

附录：

开发主页

使用说明

安装

FF插件安装方式

打开

开启firefox菜单栏->工具->JavaScript debugger

问题1：没有自动下载JS代码

从33版本就不支持了

官方firefox所有版本下载地址：

官方历史版本目录

之前是ftp的，现在改成了HTTPs了，所以就不用FTP的方式去下载了，直接点击下载即可。

下载31长期维护版本（esr）：release->版本号->系统类型（win32）->选择语言（zh-CN）

链接示例：https://ftp.mozilla.org/pub/firefox/releases/31.8.0esr/win32/zh-CN

安装两个版本的Firefox

下载好安装文件后不进行双击运行，而是在一个独立目录下右键->解压到XX文件夹，在此….\Firefox32.0_9ht\Firefox Setup 32.0.3\core文件下找到firefox.exe双击打开即可。

问题2：调试selenium user-extension.js

先打开javascript debugger,再打开selenium IDE，在Loaded Scripts panel中搜索就可以看到扩展js文件，点击出现如图问题：Access to restricted URI denied



应是JS访问权限的问题。此问题未解。路过的有知道方法的还请告知。

调试工具2：Firebug

JS调试、DOM inspection、network sniffing相互协作的最优解决方案。

功能：设置断点，stepping into、stepping over、stepping out、查看代码。

点击式（point and click）DOM查看，实时编辑DOM结构和CSS属性。

console功能：可输入并执行任意JS代码、同时显示来自JS代码的日志和调试信息。

调试打印

不用alert()函数，会弹窗口啊，不方便。

用console的函数

console.log(“Welcome %s”,username)方法支持printf功能，例如用于替代字符串的%s、用于替代数值的%d、%i、%f和用于替代对象的%o。console.log()方法使用很方便，因为这个方法以一种可读性很好的方式输出诸如数组或者HTML元素的复杂对象。

console. trace()能够用于输出栈跟踪。

console.time(“name”)和console.timeEnd(“name”)能够特定用于内联的特定计时信息。

firebug（截止描述1.0版本）提供了XHR请求和CSS资源下载的网络状况监视和报告的功能。可以在这里分析网络瓶颈。



还有web页面性能分析。单击profile按钮触发firebug跟踪所有的JS代码执行情况并输出结果。





。。。

问题：无法下载selenium的外置JS代码

通过浏览器的方式打开selenium，firefox debug出现提示

调试工具3：Browser Toolbox浏览器工具箱

Moziila Browser Toolbox 中文版简介

Moziila Browser Toolbox 英文版有详细说明

浏览器工具箱和普通的工具箱类似，但前者是应用于整个浏览器而不是单个的内容标签页。它可以让你在整个浏览器的环境中运行普通的火狐开发者工具，而不是单个网页。这让你可以debug扩展和浏览器自身的JavaScript代码，而不仅仅是网页的。

打开Browser Toolbox

web开发者工具现在Firefox一般都自带，打开web开发者如下图在设置就能打开Browser Toolbox









现在就可以查看、也能够调试所有被浏览器本身加载的或是任何后添加上且运行着的JavaScript文件啦~而且不受版本限制哦~