+:developer tools

README.md

@@ -31,7 +31,13 @@
 
     ![](assets/feature/go-here.gif)
 
-If you are interested in my Docsify template, welcome to visit my [Docsify-template](https://dzylikecode.github.io/#/blog/docsify/?id=template), which supports mindmap, math formula, mermaid, jsRunkit, and so on.
+  - open develop tools
+
+    ![](assets/2022-10-20-10-22-01.png)
+
+    > the hint to find your source file in the developer tools
+
+If you are interested in my Docsify template, welcome to visit my [Docsify-template](https://dzylikecode.github.io/#/blog/docsify/?id=template) or fork this [repo](https://github.com/dzylikecode/template-docsify), which supports mindmap, math formula, mermaid, jsRunkit, and so on.
 
 If you want to paste images in markdown, welcome to use my other plugin:[md-paste-enhanced](https://marketplace.visualstudio.com/items?itemName=dzylikecode.md-paste-enhanced).
 
@@ -61,6 +67,14 @@ I have fixed all the issues I met. If you find any issues, please report them to
 
 ## Release Notes
 
+### 1.4.0
+
+- feature:
+
+  - context menu
+
+    open develop tools
+
 ### 1.3.0
 
 - fix:

package.json

@@ -2,7 +2,7 @@
   "name": "docsify-preview",
   "displayName": "docsify-Preview",
   "description": "write docs easily with docsify",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "engines": {
     "vscode": "^1.71.0"
   },

src/main.js

@@ -61,6 +61,10 @@ async function main(context, disposable) {
     } else if (message.command == "loaded") {
       server.url = server.parseUrl(message.url);
       server.setTitile(`[Preview] ${message.url}`);
+    } else if (message.command == "openDeveloperTools") {
+      vscode.commands.executeCommand(
+        "workbench.action.webview.openDeveloperTools"
+      );
     }
     return;
     function goHere(url, linePercent) {

src/server/assets/css/contextMenu.css

@@ -21,13 +21,18 @@ ul.contextMenu li {
   border-radius: 0.2em;
 }
 ul.contextMenu li i {
-  width: 1em;
+  width: 1.2em;
 }
 ul.contextMenu li i.fa-file-lines {
   position: relative;
   left: 2px;
 }
 
+ul.contextMenu li i.fa-code {
+  position: relative;
+  right: 3px;
+}
+
 ul.contextMenu li:hover {
   background-color: #395973;
 }

src/server/assets/js/main.js

@@ -51,6 +51,7 @@ window.addEventListener("message", (event) => {
       break;
   }
 });
+
 function loadFrame(url) {
   iframe.src = url;
 }
@@ -74,6 +75,7 @@ function popContextMenu(x, y) {
     $("ul.contextMenu").show().css({ top: y, left: x });
   }
 }
+
 function openInBrowser() {
   log("open in browser");
   hideContextMenu();
@@ -89,3 +91,10 @@ function goHere() {
     linePercent: curScrollPos,
   });
 }
+
+function openDeveloperTools() {
+  hideContextMenu();
+  vscode.postMessage({
+    command: "openDeveloperTools",
+  });
+}

src/server/webView.html

@@ -26,6 +26,9 @@
       <li onclick="openInBrowser()">
         <i class="fa-solid fa-file-lines"></i> Open in Browser
       </li>
+      <li onclick="openDeveloperTools()">
+        <i class="fa-solid fa-code"></i> Open Developer Tools
+      </li>
     </ul>
     <iframe id="Server" allowTransparency="false" frameborder="0"></iframe>
     <script src="${assets/js/main.js}"></script>