提交 1a8c13ad 编写于 作者: DCloud-WZF's avatar DCloud-WZF 💬

perf(vue-devtools): optimize debug page

上级 a59b069d
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="shortcut icon" href="../icons/favicon.ico" > <link rel="shortcut icon" href="./icons/favicon.ico" >
<title>uni-dev-tools</title> <title>uni-dev-tools</title>
<style> <style>
#app, #app,
...@@ -51,7 +51,7 @@ ...@@ -51,7 +51,7 @@
</div> </div>
<div id="app"> <div id="app">
</div> </div>
<script src='./mp-qq/network.js'></script> <script src='./network'></script>
<script src='./devtools.js'></script> <script src='./devtools.js'></script>
</body> </body>
</html> </html>
\ No newline at end of file
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="../icons/favicon.ico" >
<title>uni-dev-tools</title>
<style>
#app,
#intro {
display: flex;
flex-direction: column;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
padding: 0;
}
#intro {
z-index: 100000;
justify-content: center;
align-items: center;
background-color: #fff;
text-align: center;
font-family: Roboto, sans-serif;
color: #484848;
}
#intro.hidden {
display: none;
}
#intro #logo {
width: 120px;
}
#intro .title {
margin: 30px 0;
font-size: 26px;
}
</style>
</head>
<body>
<div id="intro">
<img src="./icons/128.png" alt="" id="logo" />
<h2 class="title">
Waiting for connection...
</h2>
</div>
<div id="app">
</div>
<script src='./mp-alipay/network.js'></script>
<script src='./devtools.js'></script>
</body>
</html>
\ No newline at end of file
window.process = {
env: {
HOST: '192.168.12.130',
PORT: '8099',
}
}
\ No newline at end of file
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="../icons/favicon.ico" >
<title>uni-dev-tools</title>
<style>
#app,
#intro {
display: flex;
flex-direction: column;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
padding: 0;
}
#intro {
z-index: 100000;
justify-content: center;
align-items: center;
background-color: #fff;
text-align: center;
font-family: Roboto, sans-serif;
color: #484848;
}
#intro.hidden {
display: none;
}
#intro #logo {
width: 120px;
}
#intro .title {
margin: 30px 0;
font-size: 26px;
}
</style>
</head>
<body>
<div id="intro">
<img src="./icons/128.png" alt="" id="logo" />
<h2 class="title">
Waiting for connection...
</h2>
</div>
<div id="app">
</div>
<script src='./mp-baidu/network.js'></script>
<script src='./devtools.js'></script>
</body>
</html>
\ No newline at end of file
window.process = {
env: {
HOST: '192.168.12.130',
PORT: '8100',
}
}
\ No newline at end of file
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="../icons/favicon.ico" >
<title>uni-dev-tools</title>
<style>
#app,
#intro {
display: flex;
flex-direction: column;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
padding: 0;
}
#intro {
z-index: 100000;
justify-content: center;
align-items: center;
background-color: #fff;
text-align: center;
font-family: Roboto, sans-serif;
color: #484848;
}
#intro.hidden {
display: none;
}
#intro #logo {
width: 120px;
}
#intro .title {
margin: 30px 0;
font-size: 26px;
}
</style>
</head>
<body>
<div id="intro">
<img src="./icons/128.png" alt="" id="logo" />
<h2 class="title">
Waiting for connection...
</h2>
</div>
<div id="app">
</div>
<script src='./mp-kuaishou/network.js'></script>
<script src='./devtools.js'></script>
</body>
</html>
\ No newline at end of file
window.process = {
env: {
HOST: '192.168.12.130',
PORT: '8098',
}
}
\ No newline at end of file
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="../icons/favicon.ico" >
<title>uni-dev-tools</title>
<style>
#app,
#intro {
display: flex;
flex-direction: column;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
padding: 0;
}
#intro {
z-index: 100000;
justify-content: center;
align-items: center;
background-color: #fff;
text-align: center;
font-family: Roboto, sans-serif;
color: #484848;
}
#intro.hidden {
display: none;
}
#intro #logo {
width: 120px;
}
#intro .title {
margin: 30px 0;
font-size: 26px;
}
</style>
</head>
<body>
<div id="intro">
<img src="./icons/128.png" alt="" id="logo" />
<h2 class="title">
Waiting for connection...
</h2>
</div>
<div id="app">
</div>
<script src='./mp-lark/network.js'></script>
<script src='./devtools.js'></script>
</body>
</html>
\ No newline at end of file
window.process = {
env: {
HOST: '192.168.12.130',
PORT: '8098',
}
}
\ No newline at end of file
window.process = {
env: {
HOST: '192.168.12.130',
PORT: '8100',
}
}
\ No newline at end of file
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="../icons/favicon.ico" >
<title>uni-dev-tools</title>
<style>
#app,
#intro {
display: flex;
flex-direction: column;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
padding: 0;
}
#intro {
z-index: 100000;
justify-content: center;
align-items: center;
background-color: #fff;
text-align: center;
font-family: Roboto, sans-serif;
color: #484848;
}
#intro.hidden {
display: none;
}
#intro #logo {
width: 120px;
}
#intro .title {
margin: 30px 0;
font-size: 26px;
}
</style>
</head>
<body>
<div id="intro">
<img src="./icons/128.png" alt="" id="logo" />
<h2 class="title">
Waiting for connection...
</h2>
</div>
<div id="app">
</div>
<script src='./mp-toutiao/network.js'></script>
<script src='./devtools.js'></script>
</body>
</html>
\ No newline at end of file
window.process = {
env: {
HOST: '192.168.12.130',
PORT: '8099',
}
}
\ No newline at end of file
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="../icons/favicon.ico" >
<title>uni-dev-tools</title>
<style>
#app,
#intro {
display: flex;
flex-direction: column;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
padding: 0;
}
#intro {
z-index: 100000;
justify-content: center;
align-items: center;
background-color: #fff;
text-align: center;
font-family: Roboto, sans-serif;
color: #484848;
}
#intro.hidden {
display: none;
}
#intro #logo {
width: 120px;
}
#intro .title {
margin: 30px 0;
font-size: 26px;
}
</style>
</head>
<body>
<div id="intro">
<img src="./icons/128.png" alt="" id="logo" />
<h2 class="title">
Waiting for connection...
</h2>
</div>
<div id="app">
</div>
<script src='./mp-weixin/network.js'></script>
<script src='./devtools.js'></script>
</body>
</html>
\ No newline at end of file
window.process = {
env: {
HOST: '192.168.12.130',
PORT: '8098',
}
}
\ No newline at end of file
/* eslint-disable no-restricted-globals */
const _detectPort = require('detect-port'); const _detectPort = require('detect-port');
const os = require('os') const os = require('os')
const { createServer } = require('http') const { createServer } = require('http')
...@@ -51,15 +52,22 @@ function detectPort(port) { ...@@ -51,15 +52,22 @@ function detectPort(port) {
} }
function initFrontServer(socketHost, socketPort, network, devtoolsPort) { function initFrontServer(socketHost, socketPort, network, devtoolsPort) {
const platform = process.env.UNI_PLATFORM
app.use(express.static(__dirname)) app.use(express.static(__dirname))
app.get('/', (_, res) => { app.get('/', (_, res) => {
res.send(fs.readFileSync(path.resolve(__dirname, `./${platform}/app.html`)).toString()) res.send(fs.readFileSync(path.resolve(__dirname, `./app.html`)).toString())
}) })
writeNetworkFile(platform, socketHost, socketPort) app.get('/network', (_, res) => {
res.send(
`window.process = {
env: {
HOST: '${socketHost}',
PORT: '${socketPort}',
}
} `
)
})
app.listen(devtoolsPort, 'localhost', () => { app.listen(devtoolsPort, 'localhost', () => {
const colorUrl = (url) => colors.cyan(url.replace(/:(\d+)\//, (_, port) => `:${colors.bold(port)}/`)) const colorUrl = (url) => colors.cyan(url.replace(/:(\d+)\//, (_, port) => `:${colors.bold(port)}/`))
...@@ -72,35 +80,6 @@ function initFrontServer(socketHost, socketPort, network, devtoolsPort) { ...@@ -72,35 +80,6 @@ function initFrontServer(socketHost, socketPort, network, devtoolsPort) {
} }
function writeNetworkFile(platform, HOST, PORT) {
fs.open(
path.resolve(__dirname, `./${platform}/network.js`),
'w',
(err, fd) => {
if (err) {
console.log(colors.red(err))
return
}
fs.write(
fd,
`
window.process = {
env: {
HOST: '${HOST}',
PORT: '${PORT}',
}
}
`,
(err) => {
if (err) {
console.log(colors.red(err))
}
}
)
}
)
}
function initSocketServer(host, port) { function initSocketServer(host, port) {
const httpServer = createServer(app) const httpServer = createServer(app)
const io = new Server(httpServer, { const io = new Server(httpServer, {
......
...@@ -26,7 +26,6 @@ ...@@ -26,7 +26,6 @@
"detect-port": "^1.5.1", "detect-port": "^1.5.1",
"express": "^4.17.1", "express": "^4.17.1",
"open": "^8.4.0", "open": "^8.4.0",
"picocolors": "^1.0.0",
"socket.io": "^4.4.0" "socket.io": "^4.4.0"
} }
} }
...@@ -10,9 +10,5 @@ ...@@ -10,9 +10,5 @@
"../global.d.ts", "../global.d.ts",
"../shims-node.d.ts", "../shims-node.d.ts",
"../shims-uni-app.d.ts" "../shims-uni-app.d.ts"
], ]
"baseUrl":".",
"paths": {
"tslib" : ["node_modules/tslib/tslib.d.ts"]
}
} }
...@@ -839,14 +839,12 @@ importers: ...@@ -839,14 +839,12 @@ importers:
detect-port: ^1.5.1 detect-port: ^1.5.1
express: ^4.17.1 express: ^4.17.1
open: ^8.4.0 open: ^8.4.0
picocolors: ^1.0.0
socket.io: ^4.4.0 socket.io: ^4.4.0
dependencies: dependencies:
'@dcloudio/uni-cli-shared': link:../uni-cli-shared '@dcloudio/uni-cli-shared': link:../uni-cli-shared
detect-port: 1.5.1 detect-port: 1.5.1
express: 4.18.2 express: 4.18.2
open: 8.4.0 open: 8.4.0
picocolors: 1.0.0
socket.io: 4.5.4 socket.io: 4.5.4
packages/uts: packages/uts:
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册