Inhaltsverzeichnis [Dive Into Greasemonkey] Deutsche Version

3.4. Ausdrücke mit der JavaScript Shell auswerten

Javascript Shell ist ein "Bookmarklet", dass es ihnen erlaubt, beliebige JavaScript-Ausdrücke im Kontext der Seite auszuwerten.

Anleitung: Javascript Shell installieren

Besuchen Sie Jesse's Web Development Bookmarklets.
Ziehen sie das Shell "Bookmarklet" auf ihre Links-Toolbar.
Besuchen Sie eine Seite(zum Beispiel die Dive Into Greasemonkey Homepage), und klicken Sie auf das Shell "Bookmarklet" in Ihrer Links-Toolbar. Das JavaScript Shell Fenster wird sich im Hintergrund öffnen.

Javascript Shell stellt ihnen die gleiche Leistungskraft zur Verfügung wie der DOM Inspector, aber in einer frei formbaren Umgebung. Man könnte es sich als Eingabaufforderung für das DOM vorstellen. Spielen wir ein wenig.

Beispiel: Anleitung für die 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!

Ihre Veränderungen sollten auch auf der Originalseite durchgeführt werden, sobald Sie ENTER drücken.

Das einzige, das ich über die JavaScript-Shell erwähnen will, ist die props Funktion.

Beispiel: Die Eigenschaften eines Elements bekommen

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

Um es in einem Wort auszudrücken: “Whoa!” Was ist das alles? Es ist eine Liste aller Eigenschaften und Methoden des <a>-Elements die in Ihrem JavaScript verfügbar sind, zusammengefasst in den Leveln der DOM-Objekt-Hierarchie. Methoden und Eigenschaften, die besonders sind für Links-Elemente (wie das blur und focus Methode, und die href und hreflang Eigenschaften) sind zuerst aufgeführt, gefolgt von den Methoden und Eigenschaften, die sich alle Knoten teilen (wei die insertBefore Methode), und so weiter.

Noch einmal, das sind dieselben Informationen, die auch imA DOM Inspector verfügbar sind ... aber mit mehr Tippen und Experimentieren, und weniger zeigen und klicken.

Wie der DOM Inspector, Javascript Shell wird Ihnen nicht “folgen” wenn Sie surfen. Wenn Sie die Javascript Shell öffnen und dann im Originalfenster irgendwo anders hin navigieren, wird die Javascript Shell verwirrt werden. Es ist das Beste, erst Ihre Zielseite zu öffnen, dann die Javascript Shell zu öffnen, dann nach Herzenslust rumzumauscheln und dann die JavaScript Shell zu schließen, bevor Sie wieder etwas anderes tun.

← Elemente mit dem DOM Inspector untersuchen

Weiter Debugging-Tools →