Awesome
Console Log Element
Firefox Add-on page: https://addons.mozilla.org/en-US/firefox/addon/console-log-element
Mobile device demo: https://drive.google.com/open?id=1azFuTrUgoU6IBHb1BLJCQJlyYscMtdSS
Laptop demo: https://drive.google.com/open?id=14s2YO8iKGH9RbK1AkUGLlHreGoV9Pcsn
Sometimes I wish I could just open the console log right on a mobile device.
This simple add-on enables you to send commands to the console log without having to open the dev tools, even on mobile.
Once installed, you can bring up the console log interface by clicking on the add-on icon and button. You can also:
- Use
$()
as a shortcut fordocument.querySelector()
, which works like jQuery's$()
. - Use
$$()
as a shortcut fordocument.querySelectorAll()
. - Use
clear()
to clear the output. - Submit
"x"
to hide the interface. - You can tap any previous (valid) input to quickly reuse it, and type less on mobile.
- The input is a multiline textarea, so you can hit
Enter
to input multiple lines of code. - To submit, hit the "Send command" button, or
Shift+Enter
orCtrl+Enter
. - Click on the output to expand/collapse it.
Other links
Live CodePen demo: https://codepen.io/hchiam/pen/ZEbYgQG
GitHub backup code (note: may be out of date): https://github.com/hchiam/learning-js/blob/master/consoleLogElement.js
Learn to make your own Firefox add-on: https://github.com/hchiam/learning-firefox-extension
Useful pages to use when debugging the project itself locally:
Bookmarklet backup
https://github.com/hchiam/console-log-element/tree/master/bookmarklet