What is the Page Editor
The Page Editor is our point-and-click interface that lets you modify any webpage without writing code. It's the fastest way to get started with PixieBrix.
You can access the Page Editor in the Chrome DevTools after you've installed the PixieBrix Extension. If you haven't installed the extension, follow the steps in Installing PixieBrix before going any further.
Open the DevTools
Navigate to the page you want to edit. Then, open the DevTools by doing one of the following:
- Windows: Control + Shift + I
- Mac: Command + Option + J
- Either: right-click and select "Inspect" from the context menu
Dock the DevTools to the Bottom of the Page
Chrome might open the DevTools panel along the left, right, or bottom of your browser. With PixieBrix, you'll want it along the bottom because the Page Editor's layout is optimized for a horizontal layout. If that's not its default position, click the three dots in the top right of the DevTools window, and select the "Dock to Bottom" icon.
Access the Page Editor
The DevTools has several tabs along the top. Click the one all the way to the right that says "PixieBrix". The Page Editor will look like this:
Chrome will not show the PixieBrix Page Editor (or any other DevTool extensions) on Chrome Web Store URLs
Create an Account Alias
The first time you open the Page Editor, it will ask you to set an Account Alias i.e. your "Scope." This is used to namespace bricks you create, so their IDs don't conflict with the IDs of public and team bricks.
Your Account Alias must begin with "@" and can't have any spaces (e.g., @peter-parker). No one sees your Account Alias unless you choose to share extensions you create with other users.
After you create an Account Alias, click Set My Scope.
Excellent work! Now you're ready to Build a Workflow