如何对使用 Node.js 和 Yeoman 创建的 Javascript Office 插件 (OneNote) 进行故障排除？

Question

I might be in way over my head but I thought this basic example should be easy to follow and test https://docs.microsoft.com/en-us/office/dev/add-ins/quickstarts/onenote-quickstar

Node.js and npm were installed correctly
The server started OK
The add in manifesto was uploaded and shows up in the task pane When I click run Nothing happens

C:\Users\minime\Documents\VSCode\JavaScript\OneNote Add-in>npm run start:web

> office-addin-taskpane-js@0.0.1 start:web C:\Users\minime\Documents\VSCode\JavaScript\OneNote Add-in
> office-addin-debugging start manifest.xml web

Debugging is being started...
App type: web
Starting the dev server... (webpack-dev-server --mode development)
The dev server is running on port 3000. Process id: 12728
Debugging started.

C:\Users\minime\Documents\VSCode\JavaScript\OneNote Add-in>

The server console shows these

You already have trusted access to https://localhost.
Certificate: C:\Users\minime\.office-addin-dev-certs\localhost.crt
Key: C:\Users\minime\.office-addin-dev-certs\localhost.key
i ｢wds｣: Project is running at https://localhost:3000/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from C:\Users\minime\Documents\VSCode\JavaScript\OneNote Add-in
i ｢wdm｣: Hash: 36810652b543e5f942db
Version: webpack 4.42.1
Time: 3436ms
Built at: 06/06/2020 9:18:01 AM
                               Asset       Size    Chunks                   Chunk Names
7f313c06a52dabe7267420021403d038.png   11.6 KiB            [emitted]
                       commands.html  473 bytes            [emitted]
                         commands.js    348 KiB  commands  [emitted]        commands
                     commands.js.map    398 KiB  commands  [emitted] [dev]  commands
                         polyfill.js    745 KiB  polyfill  [emitted]        polyfill
                     polyfill.js.map    714 KiB  polyfill  [emitted] [dev]  polyfill
                        taskpane.css   1.48 KiB            [emitted]
                       taskpane.html   2.52 KiB            [emitted]
                         taskpane.js    348 KiB  taskpane  [emitted]        taskpane
                     taskpane.js.map    397 KiB  taskpane  [emitted] [dev]  taskpane
Entrypoint polyfill = polyfill.js polyfill.js.map
Entrypoint taskpane = taskpane.js taskpane.js.map
Entrypoint commands = commands.js commands.js.map
[0] multi (webpack)-dev-server/client?https://localhost:3000 @babel/polyfill 40 bytes {polyfill} [built]
[1] multi (webpack)-dev-server/client?https://localhost:3000 ./src/taskpane/taskpane.js 40 bytes {taskpane} [built]
[2] multi (webpack)-dev-server/client?https://localhost:3000 ./src/commands/commands.js 40 bytes {commands} [built]
[./node_modules/@babel/polyfill/lib/index.js] 686 bytes {polyfill} [built]
[./node_modules/@babel/polyfill/lib/noConflict.js] 567 bytes {polyfill} [built]
[./node_modules/core-js/library/fn/global.js] 87 bytes {polyfill} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {polyfill} {taskpane} {commands} [built]
[./node_modules/webpack-dev-server/client/index.js?https://localhost:3000] (webpack)-dev-server/client?https://localhost:3000 4.29 KiB {polyfill} {taskpane} {commands} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {polyfill} {taskpane} {commands} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {polyfill} {taskpane} {commands} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.91 KiB {polyfill} {taskpane} {commands} [built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {polyfill} {taskpane} {commands} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {polyfill} {taskpane} {commands} [built]
[./src/commands/commands.js] 1.06 KiB {commands} [built]
[./src/taskpane/taskpane.js] 1.54 KiB {taskpane} [built]
    + 328 hidden modules
Child HtmlWebpackCompiler:
                                   Asset      Size  Chunks             Chunk Names
    7f313c06a52dabe7267420021403d038.png  11.6 KiB          [emitted]
     + 2 hidden assets
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    Entrypoint HtmlWebpackPlugin_1 = __child-HtmlWebpackPlugin_1
    [./assets/logo-filled.png] 82 bytes {HtmlWebpackPlugin_0} [built]
    [./node_modules/html-webpack-plugin/lib/loader.js!./src/commands/commands.html] 450 bytes {HtmlWebpackPlugin_1} [built]
    [./node_modules/html-webpack-plugin/lib/loader.js!./src/taskpane/taskpane.html] 2.61 KiB {HtmlWebpackPlugin_0} [built]
i ｢wdm｣: Compiled successfully.

The addin manifesto was loaded in the OneNote Online

Answer 1

Turns out it was a beginner's mistake As per the tutorial you need to change your taskpane.js code AND SAVE IT! (which I did not)