概述
前面有文章monaco-editor做自己的代码测试工具 ，本文书接前文，在代码中加入vconsole工具，可以进行代码调试、查看网络、查看元素等。
效果
vconsole简介
vconsole是一个轻量、可拓展、针对手机网页的前端开发者调试面板。跟框架无关的，可以在 Vue、React 或其他任何框架中使用。具有如下功能特性：
- 日志(Logs)： console.log|info|error|…
- 网络(Network)： XMLHttpRequest, Fetch, sendBeacon
- 节点(Element)： HTML 节点树
- 存储(Storage)： Cookies, LocalStorage, SessionStorage
- 手动执行 JS 命令行
- 自定义插件
实现
1. 编辑器组件
编辑器的实现前面的文章有介绍过，本文在此基础上做了优化，实现代码如下：
代码语言：javascript复制<template>
<div class="editor-title">
{{ editorTitle }}
</div>
<div class="editor-content" :id="`${language}Editor`"></div>
</template>
<script>
import * as monaco from "monaco-editor";
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
self.MonacoEnvironment = {
getWorker(_, label) {
if (label === 'json') {
return new jsonWorker();
}
if (label === 'css' || label === 'scss' || label === 'less') {
return new cssWorker();
}
if (label === 'html' || label === 'handlebars' || label === 'razor') {
return new htmlWorker();
}
if (label === 'typescript' || label === 'javascript') {
return new tsWorker();
}
return new editorWorker();
},
};
let editorInstance = {}
export default {
computed: {
editorTitle() {
return this.title || this.language
}
},
mounted() {
this.initEditor()
},
props: {
title: {
type: String,
default: ''
},
language: {
type: String,
default: ''
},
value: {
type: String,
default: ''
}
},
methods: {
initEditor() {
const dom = document.getElementById(`${this.language}Editor`)
editorInstance[this.language] = monaco.editor.create(dom, {
value: this.value,
theme: "vs-dark",
language: this.language,
fontSize: 14
});
},
getCode() {
return editorInstance[this.language]?.getValue() || ''
},
}
}
</script>
<style scoped lang="scss">
$height: 2rem;
.editor-title {
height: $height;
line-height: $height;
background-color: #003f8f;
color: #fff;
padding: 0 0.5rem;
font-size: 1rem;
font-weight: bold;
}
.editor-content {
height: calc(100% - #{$height});
width: 100%;
}
</style>注意：在实现编辑器组件的时候，发现在data中定义编辑器实例在调用getValue()的时候会出现卡死的现象，但是如果定义一个变量的话，获取到的值是最后一个编辑器的值。
2. 引用组件，实现
代码的运行预览通过iframe实现，引用组件实现的完整代码如下：
<template>
<div class="editor-content">
<button class="tools-button" @click="runCode">运行</button>
<div class="editor">
<Editor language="html" ref="htmlEditor"></Editor>
</div>
<div class="editor">
<Editor language="css" ref="cssEditor"></Editor>
</div>
<div class="editor">
<Editor language="javascript" ref="jsEditor"></Editor>
</div>
</div>
<iframe id="preview" frameborder="0" class="preview-content"></iframe>
</template>
<script>
import Editor from './components/Editor.vue'
export default {
components: {
Editor
},
mounted() {
this.runCode()
},
methods: {
runCode() {
const htmlCode = this.$refs.htmlEditor.getCode()
const cssCode = this.$refs.cssEditor.getCode()
const jsCode = this.$refs.jsEditor.getCode()
const srcdoc = `
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.container {
height: calc(100% - 15rem);
}
.console {
height: 15rem;
}
.vc-mask {
display: none !important;
}
.vc-panel {
left: auto;
bottom: auto !important;
height: 100%;
width: 100%;
}
${cssCode}
</style>
<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
</head>
<body>
<div class="container">
${htmlCode}
</div>
<div class="console" id="console"></div>
<script>
// 创建调试器
const target = document.getElementById('console')
const vConsole = new window.VConsole({
defaultPlugins: ['network', 'element', 'storage'],
target
});
setTimeout(() => {
vConsole.hideSwitch();
vConsole.show()
}, 100)
${jsCode}
</script>
</body>
</html>`
console.log({
htmlCode,
cssCode,
jsCode
})
const preview = document.getElementById('preview')
preview.setAttribute("srcdoc", srcdoc);
}
}
}
</script>
<style lang="scss">
.editor-content, .preview-content {
height: 100%;
width: 50%;
float: left;
position: relative;
.editor {
height: calc(100% / 3)
}
.tools-button {
position: absolute;
right: 5px;
top: 3px;
z-index: 100;
}
}
</style>参考引用
- monaco-editor做自己的代码测试工具 (文章地址：http://t.csdnimg.cn/R0Qyo)
