inline iframe not working for webpack DevServer

[vegerot]

Version

4.5.8

Environment info

Environment Info:

  System:
    OS: macOS 11.0.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 15.0.1 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.8 - /usr/local/bin/npm
  Browsers:
    Chrome: 87.0.4280.40
    Edge: Not Found
    Firefox: 78.4.0
    Safari: 14.0.1
  npmPackages:
    @types/vue-moment: 4.0.1 => 4.0.1 
    @vue/babel-helper-vue-jsx-merge-props:  1.2.1 
    @vue/babel-helper-vue-transform-on:  1.0.0-rc.2 
    @vue/babel-plugin-jsx:  1.0.0-rc.3 
    @vue/babel-plugin-transform-vue-jsx:  1.2.1 
    @vue/babel-preset-app:  4.5.8 
    @vue/babel-preset-jsx:  1.2.3 
    @vue/babel-sugar-composition-api-inject-h:  1.2.1 
    @vue/babel-sugar-composition-api-render-instance:  1.2.1 
    @vue/babel-sugar-functional-vue:  1.2.2 
    @vue/babel-sugar-inject-h:  1.2.2 
    @vue/babel-sugar-v-model:  1.2.3 
    @vue/babel-sugar-v-on:  1.2.3 
    @vue/cli-overlay:  4.5.8 
    @vue/cli-plugin-babel: 4.5.8 => 4.5.8 
    @vue/cli-plugin-e2e-cypress: 4.5.8 => 4.5.8 
    @vue/cli-plugin-eslint: 4.5.8 => 4.5.8 
    @vue/cli-plugin-pwa: 4.5.8 => 4.5.8 
    @vue/cli-plugin-router: 4.5.8 => 4.5.8 
    @vue/cli-plugin-typescript: 4.5.8 => 4.5.8 
    @vue/cli-plugin-unit-jest: 4.5.8 => 4.5.8 
    @vue/cli-plugin-vuex: 4.5.8 => 4.5.8 
    @vue/cli-service: 4.5.8 => 4.5.8 
    @vue/cli-shared-utils:  4.5.8 
    @vue/component-compiler-utils:  3.2.0 
    @vue/eslint-config-standard: 5.1.2 => 5.1.2 
    @vue/eslint-config-typescript: 7.0.0 => 7.0.0 
    @vue/preload-webpack-plugin:  1.1.2 
    @vue/test-utils: 1.1.1 => 1.1.1 
    @vue/web-component-wrapper:  1.2.0 
    eslint-plugin-vue: 7.1.0 => 7.1.0 
    jest-serializer-vue:  2.0.2 
    js-cookie-vue: 1.0.5 => 1.0.5 
    typescript: 4.0.5 => 4.0.5 
    vue: 2.6.12 => 2.6.12 
    vue-class-component: 7.2.6 => 7.2.6 
    vue-cli-plugin-moment: 0.1.1 => 0.1.1 
    vue-cli-plugin-vuetify: 2.0.7 => 2.0.7 
    vue-eslint-parser:  7.0.0 (7.1.1)
    vue-hot-reload-api:  2.3.4 
    vue-jest:  3.0.7 
    vue-loader:  15.9.3 (16.0.0-beta.9)
    vue-moment: 4.1.0 => 4.1.0 
    vue-property-decorator: 9.0.2 => 9.0.2 
    vue-router: 3.4.7 => 3.4.7 
    vue-style-loader:  4.1.2 
    vue-template-compiler: 2.6.12 => 2.6.12 
    vue-template-es2015-compiler:  1.9.1 
    vuetify: 2.3.15 => 2.3.15 
    vuex: 3.5.1 => 3.5.1 
    vuex-class: 0.3.2 => 0.3.2 
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

Set devServer.inline=false in vue.config.js

What is expected?

Should have an iframe with a notification bar to give messages about the build

What is actually happening?

Nothing

---

The DevServer documentation describes an option called "inline", that, if disabled, "uses an <iframe> under a notification bar with messages about the build". When I set devServer.inline=false in my vue.config.js, I don't see a notification bar in my app.

[haoqunjiang]

It's under the url http://localhost:8080/webpack-dev-server/
I think we need to either append the path to the console or document it.

[vegerot]

I'm confused. How can I get that to show up under a notification bar with messages about the build?

[haoqunjiang]

I mean, instead of visiting http://localhost:8080/, please go to http://localhost:8080/webpack-dev-server/ to debug your app.