ChromeDevToolでconsoleをjavascriptから制御する

GoogleChrome 28.0.1500.71で確認を行いました。

この内容は Remote debugging protocol の話題ではありません。

ChromeDevToolはChromeDevToolでデバッグする事が可能です。
ChromeDevToolでデバッグをしてみると、ChromeDevTool自体がHTMLで構築されている事が分かります。

これを活用(というかデバッグを)して、ChromeDevTool自体に対してBookmarkretのような任意のjavascriptを実行する事が可能になります。

例えば、ChromeDevToolのConsoleを利用して特定のメソッドを実行したい場合は、こんな感じでBookmarkretを作成します。

// consoleボタンをクリックしてコンソールに移動します
var hello = 'console.log("HELLO")';
WebInspector.evaluateInConsole(hello);

実行結果は以下の通りです。

> console.log('hello')
hello

で何がうれしいの？

ChromeDevToolのConsoleで事前に色々実行したり、
ChromeDevToolを通してChromeDevToolがデバッグしている元の画面に対してスクリプトを実行したいときがあったりする訳です(adbとかadbとかadbとか)。
毎回DevTool上にスクリプト貼付けて実行するよりかは多少幸せになれます。

おまけ

他にもWebInspectorクラスには色々面白そうなメソッドが定義されています。(prefixが_及び大文字から始まるクラスを除くもの一覧)

addExtensions: function (extensions)
addMainEventListeners: function (doc)
advancedSearchController: WebInspector.AdvancedSearchController
applyDomChanges: function (domChanges)
breakpointManager: WebInspector.BreakpointManager
bringToFront: function ()
close: function (event)
closeConsole: function (animationType)
closeViewInDrawer: function ()
console: WebInspector.ConsoleModel
consoleView: WebInspector.ConsoleView
contentAsDataURL: function (content, mimeType, contentEncoded)
contextMenuCleared: function ()
contextMenuEventFired: function (event)
contextMenuItemSelected: function (id)
copyLinkAddressLabel: function ()
createFileSelectorElement: function (callback) {
cssModel: WebInspector.CSSStyleModel
currentFocusElement: function ()
databaseModel: WebInspector.DatabaseModel
debugDefaultTextEditor: false
debuggerModel: WebInspector.DebuggerModel
detached: function (reason)
dispatch: function (message) {
dispatchQueueIsEmpty: function () {
displayNameForURL: function (url)
doLoadedDone: function ()
dockController: WebInspector.DockController
documentCanCopy: function (event)
documentClick: function (event)
documentCopy: function (event)
documentCopyEventFired: function (event)
documentKeyDown: function (event)
domAgent: WebInspector.DOMAgent
domBreakpointsSidebarPane: WebInspector.DOMBreakpointsSidebarPane
domStorageModel: WebInspector.DOMStorageModel
drawer: WebInspector.Drawer
endBatchUpdate: function ()
evaluateForTestInFrontend: function (callId, script)
evaluateInConsole: function (expression, showResultOnly)
experimentsSettings: WebInspector.ExperimentsSettings
extensionAPI: Object
extensionServer: WebInspector.ExtensionServer
fileManager: WebInspector.FileManager
fileMapping: WebInspector.FileMapping
fileSystemProjectDelegate: null
fileSystemWorkspaceProvider: WebInspector.FileSystemWorkspaceProvider
findBalancedCurlyBrackets: function (source, startIndex, lastIndex) {
forAllResources: function (callback)
formatLinkText: function (url, lineNumber)
formatLocalized: function (format, substitutions, formatters, initialValue, append)
get inspectedPageDomain: function inspectedPageDomain()
getSelectionBackgroundColor: function ()
getSelectionForegroundColor: function ()
handleElementValueModifications: function (event, element, finishHandler, suggestionHandler, customNumberHandler)
highlightRangesWithStyleClass: function (element, resultRanges, styleClass, changes)
highlightSearchResult: function (element, offset, length, domChanges)
highlightSearchResults: function (element, resultRanges, changes)
inspect: function (payload, hints)
inspectElementModeController: WebInspector.InspectElementModeController
inspectedPageURL: "https://developers.google.com/chrome-developer-tools/docs/console?hl=ja"
inspectorView: WebInspector.InspectorView
installDragHandle: function (element, elementDragStart, elementDrag, elementDragEnd, cursor)
installPortStyles: function ()
invokeOnceAfterBatchUpdate: function (object, method)
isBeingEdited: function (element)
isMac: function ()
isWin: function ()
isolatedFileSystemDispatcher: WebInspector.IsolatedFileSystemDispatcher
isolatedFileSystemManager: WebInspector.IsolatedFileSystemManager
linkifyRequestAsNode: function (request, classes)
linkifyResourceAsNode: function (url, lineNumber, classes, tooltipText)
linkifyStringAsFragment: function (string)
linkifyStringAsFragmentWithCustomLinkifier: function (string, linkifier)
linkifyURLAsNode: function (url, linkText, classes, isExternal, tooltipText)
liveEditSupport: WebInspector.LiveEditSupport
loaded: function ()
log: function (message, messageLevel, showConsole)
markBeingEdited: function (element, value)
networkLog: WebInspector.NetworkLog
networkManager: WebInspector.NetworkManager
networkWorkspaceProvider: WebInspector.SimpleWorkspaceProvider
notifications: WebInspector.Object
openAnchorLocationRegistry: WebInspector.HandlerRegistry
openLinkExternallyLabel: function ()
openResource: function (resourceURL, inResourcesPanel)
panel: function (panel)
panels: Object
platform: function ()
platformFlavor: function ()
port: function ()
postDocumentKeyDown: function (event)
previousFocusElement: function ()
projectTypes: Object
queryParamsObject: Object
reload: function ()
resetToolbarColors: function ()
resourceForURL: function (url)
resourceTreeModel: WebInspector.ResourceTreeModel
resourceTypes: Object
restoreFocusFromElement: function (element)
revertDomChanges: function (domChanges)
runtimeModel: WebInspector.RuntimeModel
scriptSnippetModel: WebInspector.ScriptSnippetModel
searchController: WebInspector.SearchController
set inspectedPageDomain: undefined
setCurrentFocusElement: function (x)
setDockingUnavailable: function (unavailable)
setInspectedTabId: function (tabId)
setToolbarColors: function (backgroundColor, color)
settings: WebInspector.Settings
settingsController: WebInspector.SettingsController
shortcutsScreen: WebInspector.ShortcutsScreen
showConsole: function (animationType)
showErrorMessage: function (error)
showPanel: function (panel)
showViewInDrawer: function (statusBarElement, view, onclose)
startBatchUpdate: function ()
startEditing: function (element, config)
styleContentBinding: WebInspector.StyleContentBinding
suggestReload: function ()
targetCrashed: function ()
timelineManager: WebInspector.TimelineManager
toolbar: WebInspector.Toolbar
useLowerCaseMenuTitles: function ()
userAgentSupport: WebInspector.UserAgentSupport
userMetrics: WebInspector.UserMetrics
windowResize: function (event)
workerManager: WebInspector.WorkerManager
workspace: WebInspector.Workspace
workspaceController: WebInspector.WorkspaceController