Firefox:Dive Into Greasemonkey/3.4. Evaluating expressions with Javascript Shell

步骤：Javascript Shell 安装

1. 访问Jesse's Web Development Bookmarklets (http://www.squarefree.com/bookmarklets/webdevel.html)

2. 将Shell bookmarklet放到书签工具栏。

3. 访问一个网页(例如, Dive Into Greasemonkey (http://diveintogreasemonkey.org) ), 单击书签工具栏中的Shell。此时，Javascript Shell窗口就会在后台打开。

例子：Javascript Shell 简介

document.title
Dive Into Greasemonkey

document.title = 'Hello World'
Hello World

var paragraphs = document.getElementsByTagName('p')
paragraphs
[object HTMLCollection]

paragraphs.length
5

paragraphs[0]
[object HTMLParagraphElement]

paragraphs[0].innerHTML
Teaching an old web new tricks

paragraphs[0].innerHTML = 'Live editing, baby!'
Live editing, baby!

当您输入完上面的内容后，按回车，您将会看到网页上的变化。

例子: 获取元素属性

var link = document.getElementsByTagName('a')[0] props(link)

Methods of prototype: blur, focus
Fields of prototype: id, title, lang, dir, className, accessKey,
charset, coords, href, hreflang, name, rel, rev, shape, tabIndex,
target, type, protocol, host, hostname, pathname, search, port,
hash, text, offsetTop, offsetLeft, offsetWidth, offsetHeight,
offsetParent, innerHTML, scrollTop, scrollLeft, scrollHeight,
scrollWidth, clientHeight, clientWidth, style
Methods of prototype of prototype of prototype: insertBefore,
replaceChild, removeChild, appendChild, hasChildNodes, cloneNode,
normalize, isSupported, hasAttributes, getAttribute, setAttribute,
removeAttribute, getAttributeNode, setAttributeNode,
removeAttributeNode, getElementsByTagName, getAttributeNS,
setAttributeNS, removeAttributeNS, getAttributeNodeNS,setAttributeNodeNS, getElementsByTagNameNS, hasAttribute,
hasAttributeNS, addEventListener, removeEventListener, dispatchEvent,
compareDocumentPosition, isSameNode, lookupPrefix, isDefaultNamespace,
lookupNamespaceURI, isEqualNode, getFeature, setUserData, getUserData
Fields of prototype of prototype of prototype: tagName, nodeName,
nodeValue, nodeType, parentNode, childNodes, firstChild, lastChild,
previousSibling, nextSibling, attributes, ownerDocument, namespaceURI,
prefix, localName, ELEMENT_NODE, ATTRIBUTE_NODE, TEXT_NODE,
CDATA_SECTION_NODE, ENTITY_REFERENCE_NODE, ENTITY_NODE,
PROCESSING_INSTRUCTION_NODE, COMMENT_NODE, DOCUMENT_NODE,
DOCUMENT_TYPE_NODE, DOCUMENT_FRAGMENT_NODE, NOTATION_NODE,
baseURI, textContent, DOCUMENT_POSITION_DISCONNECTED,
DOCUMENT_POSITION_PRECEDING, DOCUMENT_POSITION_FOLLOWING,
DOCUMENT_POSITION_CONTAINS, DOCUMENT_POSITION_CONTAINED_BY,
DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC
Methods of prototype of prototype of prototype of prototype of prototype: toString

哇喔！上面所显示的这些内容都是什么呢？它们是 <a> 这个元素所具有的所有的属性和方法。 它们按照 DOM 的对象层次显示出来。首先列出的是 <a> 所独有的属性和方法(例如 blur 和 focus 方法, 以及 href 和 hreflang 属性), 接着是所有节点共享的属性和方法 (例如 insertBefore 等等)。

这又和DOM查看器中的信息相同……但是需要更多的输入与试验，和更少的移动鼠标与点击。