Add "Debugging - Debug Tag" example.

Debugging/2. Debug Tag/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "svelte-debugging-debug_tag",
+  "description": "Debugging - Debug Tag",
+  "version": "1.0.0",
+  "author": "Rick Beerendonk",
+  "license": "EUPL-1.2",
+  "devDependencies": {
+    "cross-env": "7.0.0",
+    "css-loader": "3.4.2",
+    "html-webpack-plugin": "3.2.0",
+    "mini-css-extract-plugin": "0.9.0",
+    "serve": "11.3.0",
+    "style-loader": "1.1.3",
+    "svelte": "3.18.2",
+    "svelte-loader": "2.13.6",
+    "webpack": "4.41.6",
+    "webpack-cli": "3.3.11",
+    "webpack-dev-server": "3.10.3"
+  },
+  "scripts": {
+    "build": "cross-env NODE_ENV=production webpack",
+    "start": "webpack-dev-server --open"
+  }
+}

Debugging/2. Debug Tag/src/App.svelte

@@ -0,0 +1,17 @@
+<script>
+  let count = 0;
+  let time = '';
+
+  setInterval(() => {
+    time = Date();
+  }, 1000);
+</script>
+
+<!-- @debug is in a template what console.log() + debugger is in JavaScript -->
+{@debug count, time}
+
+<h1 on:click={() => count++}>This has been clicked {count} times!</h1>
+<h2>{time}</h2>
+
+<!-- European Union Public License version 1.2 -->
+<!-- Copyright © 2020 Rick Beerendonk -->

Debugging/2. Debug Tag/src/main.js

@@ -0,0 +1,10 @@
+/*! European Union Public License version 1.2 !*/
+/*! Copyright © 2020 Rick Beerendonk          !*/
+
+import App from './App';
+
+const app = new App({
+  target: document.body
+});
+
+export default app;

Debugging/2. Debug Tag/webpack.config.js

@@ -0,0 +1,63 @@
+/*! European Union Public License version 1.2 !*/
+/*! Copyright © 2020 Rick Beerendonk          !*/
+
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+const mode = process.env.NODE_ENV || 'development';
+const prod = mode === 'production';
+
+module.exports = {
+  entry: {
+    bundle: ['./src/main.js']
+  },
+  resolve: {
+    extensions: ['.mjs', '.js', '.svelte']
+  },
+  output: {
+    path: __dirname + '/dist',
+    filename: '[name].js',
+    chunkFilename: '[name].[id].js'
+  },
+  devtool: prod ? false : 'source-map',
+  devServer: {
+    contentBase: './dist',
+    port: 9100
+  },
+  mode,
+  module: {
+    rules: [
+      {
+        test: /\.svelte$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'svelte-loader',
+          options: {
+            dev: true,
+            emitCss: true,
+            hotReload: true
+          }
+        }
+      },
+      {
+        test: /\.css$/,
+        use: [
+          /**
+           * MiniCssExtractPlugin doesn't support HMR.
+           * For developing, use 'style-loader' instead.
+           * */
+          prod ? MiniCssExtractPlugin.loader : 'style-loader',
+          'css-loader'
+        ]
+      }
+    ]
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      title: 'Debugging - Debug Tag'
+    }),
+    new MiniCssExtractPlugin({
+      filename: '[name].css'
+    })
+  ]
+};