Puppeteer IDE extension은 개발자 도구에서 인형극 스크립트를 작성하고 실행할 수 있는 독립 실행형 확장 프로그램입니다. 이 확장이 작동하기 위해 원격 디버깅으로 브라우저를 시작하거나 nodejs 또는 기타 서비스를 설치할 필요가 없습니다.

설치

이 확장 프로그램은 크롬 웹 스토어에 게시되어 있습니다. Click here 크롬 웹 스토어에서 확장 프로그램을 볼 수 있습니다.

브라우저에 확장을 추가하면 개발자 도구에 Puppeteer IDE 탭이 추가됩니다. 이 탭으로 전환하면 기본적으로 즉시 실행할 수 있는 하나의 테스트 스크립트가 있습니다.

이 확장 프로그램은 Edge, Brave 등과 같은 다른 크롬 기반 브라우저와 함께 사용할 수 있습니다.

예 GIF :-

용법

개발자 도구가 열리는 탭에 대해 puppeteerpage 인스턴스 변수에 직접 액세스할 수 있습니다. Execute 버튼을 클릭하면 검사 탭에서 스크립트가 실행됩니다.

스크립트는 편집하는 동안 자동으로 저장됩니다.

편집기는 개발자 도구의 테마를 사용합니다. following this guide 으로 개발자 도구의 테마를 변경할 수 있습니다.

밝은 테마 스크린샷 :-



어두운 테마 스크린샷 :-

은둔

이 확장은 독립 실행형이며 백그라운드에서 외부 API 호출을 수행하지 않습니다. 확장/페이지 및 소스 코드의 네트워크를 검사할 수 있습니다.

자세한 내용은 이 프로젝트Github Repo를 확인하십시오.

가자난프 / puppeteer-ide-extension

브라우저의 개발자 도구에 있는 독립 실행형 인형극 놀이터.

Puppeteer IDE 확장

브라우저의 개발자 도구에서 puppeteer 스크립트를 개발, 테스트 및 실행하는 독립 실행형 확장입니다.
Installation •
Usage •
Screenshots •
Privacy •
Build From Source •
FAQs

설치

이 확장 프로그램은 크롬 웹 스토어에 게시되어 있습니다.

용법

이 확장 프로그램은 브라우저의 개발자 도구에 "Puppeteer IDE"라는 추가 탭을 추가하여 puppeteer 스크립트를 작성하고 실행할 수 있습니다.
개발자 도구가 열리는 탭에 대해 직접 인스턴스 변수에 액세스할 수 있습니다page.Execute 버튼을 클릭하면 검사 탭에서 스크립트가 실행됩니다.
스크립트는 편집하는 동안 자동으로 저장됩니다.

스크린샷

편집기는 개발자 도구의 테마를 사용합니다. Here is a guide 개발자 도구의 테마를 사용자 정의하는 방법을 보여줍니다.
어두운 테마 :-

밝은 테마 :-

소스에서 빌드

소스에서 확장을 빌드하려면 :-

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

cd puppeteer-ide-extension

npm install

npm run dist

…

View on GitHub