Coder Social home page Coder Social logo

chrome-bigconsole's Introduction

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.

chrome-bigconsole's People

Contributors

eransch avatar icecreamyou avatar uzitech avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.