Note: Skip this paragraph if you are interested in using the Chome's developer tools.
Chrome is Google's version of a web browser, based on the open source WebKit layout engine. The project name was derived from the graphical user interface of Mozilla's browsers, which may in fact cause some confusion during web-research. (see here for instance). Chrome saw its first release on September 2nd, 2008, with subsequently quick adoption by the developer and user community. By now Chrome has scored roughly 25% of the worldwide usage share of web browsers ( Q3/2011 StatCounter).
Google's Open source endeavor is reflected in the Chromium project, which is an open source web browser project on which Chrome is based. Chromium snapshots appear hourly and are essentially the same sources on which Chrome is based, except for a a few extras, and plugins such as:
a Google's branding, auto-update mechanism, click-through licensing terms, usage-tracking, a built-in PDF viewer and bundling of the Adobe Flash Player (src: wikipedia).So far ther is no discernable divide between Chrome and Chromium, with the slight addition of a pdf viewer for the former.
The native pdf viewer uses the 2D rendering frontend 'skia'.
Skia is a complete 2D graphic library for drawing Text, Geometries, and Images. Features include:
- 3x3 matrices w/ perspective antialiasing,
- filters shaders,
The interesting part: Device backends for Skia currently include: Raster OpenGL PDF.
Overall the project is an impressive proof of concept: https://github.com/andreasgal/pdf.js/ . A demo of pdf.js is available here
- Presto (Opera), Overview of ECMAScript engines
- TraceMonkey (Mozilla), see also: SpiderMonkey
- IronMonkey Next-Gen Features, Overview (MDN)
- V8 (google, Chrome, Chromium & derivatives)
- Tamarin (Adobe, Actionscript - allows operator overloading)
Primarily I develop JS based applications with V8 and Presto, and cross-test with TraceMonkey.
Chrome / Chromium - Tools
ALT+ESC will bring the currently active window to the background (Vista, Win 7), - useful if you have the web inspector detached.
SHIFT+ESC brings up a memory inspection window in Chrome (as seen in the picture, with the most important metrics in-view; about:memory or chrome://memory-redirect/ as URI will provide the same information as html and is far less useful). The memory view lets you quickly see if your script is running rampant on memory consumption. This is important when juggling with extensive canvas, FileReader and SVG operations. Many C,C++ developers are not immediately familiar how to declare variable scopes in a garbage friendly manner, and that some objects are best explicitly freed with the delete keyword.
Note: Delete will unset all references for the particular object of the objects, thus effectively flagging it for garbage collection. Since the browser environment is effectively a sandbox, flagging an object for garbage collection is pretty straight forward. Objects can be defined as frozen, etc... disallowing any manipulation including the deletion of the object.
Additionally, during some operations, for instance file operations, objects may be locked for deletion till a particular task has finished (reading of a large File, which involves OS-APIs on some level). Operations like that often manage their status-functionality-reciprocity through the callback-based binding of event handlers.
Here is what a TypeError will 'cost' you in terms of DOM-resources...
with the result looking like this...
The console is sufficiently fast, but it would be a mistake to assume that the console is anything like a command line. First off Chrome's, Operas (but to lesser extend) and Firebugs consoles are using a web frontend, and secondly provide a long or unlimited history for the current session.
There are JS-consoles however. Nodejs can be used for this purpose, which in conjunction with this code, allows you to redict code written to console.log to stdio. There are bindings for JS to Java, and C# as well (links not provided).
Opera's console is much leaner in the amount of markup it uses. You can get a quick picture of the speed by just running a simple statement that would be over within a second in any proper command line environment
An explicit project for the purpose of running JS on the command line (although a bit dated) is provided by mozilla in the form of Rhino Shell. (https://developer.mozilla.org/en/Rhino_Shell)
Note: Be careful with the interactive console. If you accidentally dump a vast object, the console-API will reflect upon each item and generate corresponding html based trees for it to allow 'pretty-printing', with the result of a memory leak-like effect. The console has no safeguard for large objects (yet), inquiring whether the user really wants to view the object's contents. It would be desirable in some circumstances to relay the data to another output or pipe...
As expected program code entered in the console is free to execute without the often built in loop-checks ( dialog popup e.g. if a script consumes processing time for too long).
To enter a multiline statement in Chrome's JS -console or Opera, use SHIFT+ENTER. To execute the statement and put it on the running stack, press:
- STRG+ ENTER in Opera
- ENTER in Chrome
Chrome / Chromium Console Details
The web inspector can be toggled by pressing CTRL+SHIFT+I (same in Opera) with the DOM inspection tab in focus. CTRL+ SHIFT+ J will do the same with the JS-console focused and is thus preferable most of the time. CTRL + SHIFT + C toggles will open with the Element mode foused
Once opened, press F1 or ? to get a shortcut-help overlay showing you the various commands for the active-tab. ESC will toggle the console, in any other tab than the console-tab. Here is an overview.
You can use the following commands in all tabs
Focus Search Box: Ctrl-F
Find Next : Ctrl-G
Find Previous: Ctrl-Shift-G
Google packaged its console funcitonality into the scope 'window.console._commandLineAPI)', which is automatically resolved each time the JS-console is invoked through the keyword with:
Here is a short overview:
All elements with id="idElement"-tags will be referenced by a variable named after the value of the id-tag, in this example: 'idElement'
Any element, selected (highlighted) in the Elements-tab will be assigned a reference '$n', where n is the first initially selected element (FILO like assignment).
$("elementName") and $$(cssSelector) jQuery-like selection is possible, provided that the id value is entered, dumping the HtmlElement object to the console whilst highlighting it in the document view.
In the following examples an element <div id="footer"...>.. is used, which is part of the documentview presented to the user whenever an empty tab is opened.
notice: window.console._commandLineAPI.footer is used!
keys(footer) || keys("footer")
clear() will clear the console, copy
These commands are essentially the same as in Firebug. See here for a command list.
provides Information on the html / css /js markup improvement based on static look up tables
gives detailed insight into the information flow, and speed when a resource was transmitted
clicking on it will open a side panel providing additional information like transmission headers and GET / PUT / POST / PUSH messages;
Notice how chrome:// applications have virtually no header overhead, as they don't require HTTP
Resource view, provides a list of all resources within a document-view
Lastly memory and CPU profiling is accessible by starting chrome with the flag chrome.exe --enable-memory-info
This will then also allow access to the corresponding JS objects e.g. console.memory.usedJSHeapSize" and
"console.memory.totalJSHeapSize" which will otherwise return 0 in all OS. With Chrome > 6 the memory objects is accessible in window.webkitPerformance
In the Scripts-tab-view several small icons are located at the bottom left which are almost dismissed at first.
Undocking in a separate window
Hiding the console (toogle it with ESC)
Inspection of elements (via mouse-hover and left click to commit)
Do not pause on all exceptions
(This little button convinced me to write this article)
Chrome Release Channels - The Chromium Projects
Google Chrome Blog