devtools

devtools copied to clipboard

Version

6.1.3

Browser and OS info

Safari 11 (604.1.38) with the Shell-Electron runtime

Steps to reproduce

• Install the devtool as a package dependency or from the built sources, both aren't working
• Add the devtool script in the app, as usual
• Open the app in Safari 11 (604.1.38)
• Look at the console

What is expected?

The devtool connection should be established

What is actually happening?

The console print an error:

SyntaxError: Unexpected token '...'. Cannot parse object literal property. @ eval - localhost:2:77909

And the devtool can't establish connection.

---

It works fine in Firefox or Chrome. The "..." in the error seems to be found in the built hook.js, near .SharedData.pluginPermissions = { ...shared_data_1

Isn't Safari 11 an unsupported browser?

Well, it shouldn't be for the hook file alone (not talking about the devtool webext here), at least judging from https://github.com/vuejs/devtools/blob/main/packages/shell-electron/webpack.config.js 😓

I digged a lot: the error come from the fact that prior to Safari 11.1 spreading in an object isn't avaliable and there's indeed a whole bunch of { ... inside Hook.js and Backend.js

With enough fiddeling, I manage to fix it locally. I :

• changed the package/shell-electron/webpack.config.js to de-minimize and changing devtool to "source-map"
• rebuild with webpack
• ran a custom-config Babel on the output backend.js and hook.js
• ran another webpack to bundle the polyfills

And the resulting new backend.js and hook.js, once placed inside the build folder used by vue-devtool, made it work on Safari. VERY hacky though, I believe the default babel+webpack should be already configured to properly support old browsers, that's what the standalone devtool is for, isn't it?