Sep 15, 2020 It was originally built entirely on Microsoft's own technology until the launch of Chromium Edge, which is built on the same code base as Google Chrome, Brave, and Chrome Canary. In addition to Windows 10, 8, and 7, you can also get Microsoft's Chromium-based Edge browser for macOS, iOS, and Android. Microsoft collectively calls the Canary, Dev, and Beta channels the 'Microsoft Edge Insider Channels'. As a result, Edge updates were decoupled from new versions of Windows. Major versions of Edge Stable are now scheduled for release every 6 weeks, closely following Chromium version releases. Apr 16, 2021 The new Microsoft Edge Canary runs on Chromium, supports popular extensions, and regularly gets new features from Microsoft. This latest version matches the desktop Edge browser. Free at Google Play.
-->Puppeteer is a Node library that provides a high-level API to control Microsoft Edge (Chromium) using the DevTools Protocol. Puppeteer launches headless browsers by default. Headless browsers do not display a UI, so instead you must use the command line. You may also configure Puppeteer to run full (non-headless) Microsoft Edge as well.
By default, when you install Puppeteer, the installer downloads a recent version of Chromium, the open-source browser that Microsoft Edge is also built upon. If you have Microsoft Edge (Chromium) installed, you may use puppeteer-core. puppeteer-core
is a lightweight version of Puppeteer that launches an existing browser installation, like Microsoft Edge (Chromium). To download Microsoft Edge (Chromium), navigate to Download Microsoft Edge Insider Channels.
Installing puppeteer-core
Microsoft Edge Chromium Canary Download
You may add puppeteer-core
to your website or app with one of the following commands.
Launch Microsoft Edge with puppeteer-core
Note
puppeteer-core
relies on Node v8.9.0 or later. The example below uses async
/await
which is only supported in Node v7.6.0 or later. Run node -v
from the command-line to ensure you have a compatible version of Node.js.
puppeteer-core
should be familiar to users of other browser-testing-frameworks like WebDriver. You create an instance of the browser, open a page, and then manipulate it with the Puppeteer API. In the following code sample, puppeteer-core
launches Microsoft Edge (Chromium), navigates to https://www.microsoftedgeinsider.com
, and saves a screenshot as example.png
.
Copy the following code snippet and save it as example.js
.
Change executablePath
to point to your installation of Microsoft Edge (Chromium). For example, on macOS, the executablePath
for Microsoft Edge Canary should be set to /Applications/Microsoft Edge Canary.app/
. To find the executablePath
, navigate to edge://version
and copy the Executable path on that page or install the edge-paths package with one of the following commands.
Set Edge Chromium Default Browser
The code sample below uses the edge-paths package to programmatically find the path to your installation of Microsoft Edge (Chromium) on your OS.
Finally, set executablePath: EDGE_PATH
in example.js
. Save your changes.
Note
Microsoft Edge (EdgeHTML) does not work with puppeteer-core
. You must install the Microsoft Edge Insider channels to continue following this example.
Now, run example.js
from the command line.
puppeteer-core
launches Microsoft Edge, navigates to https://www.microsoftedgeinsider.com
, and saves a screenshot of the webpage. Customize the screenshot size with page.setViewport().
This is just a simple example of the automation and testing scenarios enabled by Puppeteer and puppeteer-core
. For more information about Puppeteer and how it works, navigate to Puppeteer.
Getting in touch with the Microsoft Edge DevTools team
The Microsoft Edge Developer team is eager to hear your feedback about using Puppeteer, puppeteer-core
, and Microsoft Edge. Use the Send Feedback icon in the Microsoft Edge DevTools or tweet @EdgeDevTools to let the Microsoft Edge team know what you think.
With the Debugger for Microsoft Edge Visual Studio Code extension, debug your front-end JavaScript code line by line and see console.log()
statements directly from Visual Studio Code!
Launching Microsoft Edge
Navigate to the Debug view (Ctrl
+Shift
+D
on Windows or Command
+Shift
+D
on macOS) in the Activity Bar. If you do not have any configurations in Visual Studio Code, select F5
on Windows or macOS or select the green Play button. Select Edge in the dropdown. You should see a launch.json
file with the following configuration.
If you select F5
on Windows or macOS or select the green Play button again, Visual Studio Code launches Microsoft Edge (EdgeHTML) and you are able to debug any web project you have running on port 8080
directly from Visual Studio Code!
Microsoft Edge (Chromium)
Microsoft Edge Based On Chromium Download
If you want to launch Microsoft Edge (Chromium), the new Microsoft Edge, instead of Microsoft Edge (EdgeHTML), simply add a version
attribute to your existing configuration with the version of Microsoft Edge (Chromium) you want to launch (dev
, beta
, or canary
). The following configuration below launches the Canary version of Microsoft Edge (Chromium).
Attaching to Microsoft Edge
Attach Visual Studio Code to Microsoft Edge (Chromium). From your terminal, run the following command.
Add the configuration below to your launch.json
file.
If you now run this configuration, Visual Studio Code attaches to Microsoft Edge (Chromium) and start debugging.
Getting in touch with the Elements for Microsoft Edge Visual Studio Code extension team
Send your feedback by filing an issue against in the GitHub repo of the extension. Please include the debug adapter log file, which is created for each run in the %temp%
directory with the name vscode-edge-debug2.txt
. Drag this file into an issue comment to upload it to GitHub.
To help make the Elements for Microsoft Edge Visual Studio Code extension better, your contributions are welcome! Find everything you need to get started in GitHub repo of the extension.