DEV Community

Cover image for Puppeteer IDE Extension: What's new ?
Gajanan Patil
Gajanan Patil

Posted on

Puppeteer IDE Extension: What's new ?

Extension demo GIF

Changes

Added

  • Multi tabs and scripts support. Now you can store multiple scripts and keep the ones you use often, opened in tabs. Scripts will be stored in browser's storage, nothing goes outside from this extension.
  • Theme switch. Instead of changing theme of whole devtools window, now there is a separate theme switch for panel.
Dark Theme Light Theme
Dark Theme Light Theme
  • $0 suggestion. Typing $0 in editor will give currently selected element's selector suggestion.

$0 usage GIF

  • Logging unhandled errors in console tab of inspected window. Unhandled errors will now also be logged in inspected window's console tab along with console tab of extension panel.
  • Keyboard shortcuts.

Fixed

  • Broken editor icons issue.

More Information

GitHub logo gajananpp / puppeteer-ide-extension

Standalone puppeteer playground in browser's developer tools.

Puppeteer IDE Extension

lint build

A standalone extension to write and execute puppeteer scripts from browser's developer tools.

InstallationUsageScreenshotsBuild From SourcePrivacyTodoFAQs

Demo GIF

Installation

This extension is published on chrome web store.

Add from Chrome web store

Usage

This extension will add an extra tab named "Puppeteer IDE" in browser's developer tools from where you can write and execute puppeteer scripts.

Use page instance variable directly for the tab in which developer tools is opened.

On clicking Execute button, the script will be executed on the inspected tab.

The script will be auto saved as it is being edited.

Screenshots

Using $0 :- Using $0 to get selector

Dark theme :- Dark theme

Light theme :- Light theme

Build From Source

To build extension from source :-

git clone https://github.com/gajananpp/puppeteer-ide-extension

cd puppeteer-ide-extension

npm install

npm run dist

This will output extension in dist folder which you can load in your browser by following this steps.

Discussion (0)