3.4. 用 Javascript Shell 计算表达式 [深入浅出 Greasemonkey]

3.4. 用 Javascript Shell 计算表达式

Javascript Shell 是一个 bookmarklet，可以在当前页面的内容中计算任意 Javascript 表达式。

过程 3.5. 安装 Javascript Shell

访问 Jesse's Web Development Bookmarklets。
将 Shell bookmarklet 拖放到您的书签工具栏。
访问一个网页(例如，深入浅出 Greasemonkey 主页)，然后点击书签工具栏上的 Shell bookmarklet。Javascript Shell 窗口会在后台打开。

Javascript Shell 提供了与 DOM 查看器一样强大的功能，但是环境更加宽松。就把它当作 DOM 的命令行版本吧。游戏开始。

例 3.2. Javascript Shell 介绍

document.title
深入浅出 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
教老网玩新把戏
paragraphs[0].innerHTML = 'Live editing, baby!'
Live editing, baby!

当输入完上面的内容后，按回车键，变更就会反映到原始网页上。

我想提一下 Javascript Shell 的 props 函数。

例 3.3. 获取元素属性

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> 在 Javascript 中所有有效的属性和方法，并且按照 DOM 的对象层级分类。先列出的是链接元素的特有方法和属性(比如 blur 和 focus 方法， href 和 hreflang 属性)，然后列出了所有节点公有的方法和属性(比如 insertBefore)，等等。

此外，这和 DOM 查看器上的内容一样……只不过是多些打字多些试验，少点些鼠标。

同 DOM 查看器一样，Javascript Shell 也不会“跟着”您浏览网页。如果打开 Javascript Shell 然后在原始窗口中浏览别的网页，Javascript Shell 会变得非常困惑。好的做法是，去您想去的地方，查看您想查看的页面，在做别的事情前先关闭 Javascript Shell。

← 用 DOM 查看器查看元素

其他调试工具 →