Adds a panel to the Chrome Developer Tools that provides a multi-line console, like in Firebug, with syntax highlighting.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
ace update ace Jun 13, 2017
.eslintrc.json
LICENSE.md Fixes most issues around code that failed to return a usable value; i… Jul 26, 2015
README.md Corrected the description of a known issue Nov 3, 2015
devtools.html Initial commit Jul 7, 2013
devtools.js Updated icons Jul 26, 2015
icon128.png Updated icons Jul 26, 2015
icon16.png
icon48.png Updated icons Jul 26, 2015
icon96.png Added to Chrome Web Store Jul 26, 2015
layout.js add .eslintrc.json Jun 13, 2017
manifest.json add editor position Jun 12, 2017
options.html organize themes Jun 13, 2017
options.js
panel.html add autocomplete Jun 13, 2017
panel.js add .eslintrc.json Jun 13, 2017
prettyprint.js Fixes most issues around code that failed to return a usable value; i… Jul 26, 2015
prettyprint.min.js Fixes most issues around code that failed to return a usable value; i… Jul 26, 2015
screenshot-big.png
screenshot.png
test_snippet.js Fixes most issues around code that failed to return a usable value; i… Jul 26, 2015

README.md

Adds a panel to the Chrome Developer Tools that provides a multi-line split console, like in Firebug.

Screenshot

Includes:

  • Vertical split style multiline REPL
  • Syntax highlighting and nice editor things thanks to Ace Editor
  • Pretty-printed output
  • "Run" button or Ctrl-Enter to execute code
  • "Clear" button to clear REPL
  • "History" drop-down to restore previously executed code

Why?

Chrome has a built-in multiline split console called Snippets. However, I found that I could iterate and try out code faster in Firebug's console than I could in Snippets. I built BigConsole to be the Chrome equivalent of Firebug's BigConsole. Where Snippets is more like a light IDE, BigConsole is simpler and geared towards iterating on code as quickly as possible in a multiline, syntax-highlighted REPL.

Using FirebugLite is a possible alternative, but it has a number of limitations.

Known issues

  • The console functions (for example, console.log()) currently only log to BigConsole if they are called from within BigConsole. It would be nice if BigConsole showed everything the normal console shows and vice versa.
  • It would be nice if large objects were printed in a collapsed format and only expanded when clicked on. The pretty-printing of most objects takes up an unnecessary amount of space.
  • If a single run of the code in BigConsole creates console logs of multiple types, the output is not guaranteed to be in the same order in which the logs were created.

Installation

You can get the extension from the Chrome Web Store.

Then go to any page you want to inspect, open the devtools (Ctrl-Shift-I), and switch to the BigConsole tab.

If you want to modify/improve the extension, you'll need to install it in developer mode:

  1. Clone the code
  2. Go to chrome://extensions
  3. Check the "Developer mode" checkbox at the top of the page
  4. Click the "Load unpacked extension..." button which will appear at the top of the page
  5. Navigate to the folder with the extension code in it and click "OK"

To update in developer mode, pull the latest code (e.g. with git pull), then go to chrome://extensions and click the "Reload (CTRL+R)" link under the extension. If you have the devtools open, you'll have to close and reopen it before the upgraded version will be loaded.

Credits

Isaac Sukin (@IceCreamYou) is the author of this project.

Contributions are very much welcome!

As described in the license file, the Ace Editor code is included under the BSD 3-Clause License, the PrettyPrint code is included under a modified BSD 2-Clause License, and the rest of this project is released under the MIT License.