Since we’re big fans of VS-code, we decided to use the fantastic monaco-editor library that powers it. Without a doubt the most “useful” aspect of any debugger or REPL is the editing experience. If you do two things, read below on how we built it! Building the editor
Let me pause and say this before we get to far: if you do one thing today, just try out the debugger. Since we found it to be such a useful tool, we also thought it’d be interesting to go over some of its core fundamentals and how we went about building it. Quite a bit of planning, research and development went into building this editor out.
Tab-based layout with the ability to save your code. Ability to control browser-specific parameters like headless and stealth. Downloading of files when needed, useful for testing PDFs/PNGs. The ability to interact with the DevTools of the browser. A visual screencast of the browser that you can interact with. An editor with syntax highlighting and auto-complete. We’ve been using this debugger internally for quite some time, and have found it incredibly useful. Today, we’re happy to announce that our complete re-write of the debugger is now live 🎉! It includes all the features we wanted in a debugger, and more. Simply put: headless: false isn’t quite enough to debug Puppeteer, nor is any current live “REPL” out there. Since browserless is built specifically for developers, we’re always striving to provide the best experience possible with debugging - and weren’t satisfied with the state-of-the-art with the newer automation libraries. 
Without a doubt, one of the most helpful tools when working with any browser automation library is a visual debugger.
0 kommentar(er)
