@vue/devtools
Version:
StandAlone vue-devtools
114 lines (101 loc) • 2.44 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue Developer 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;
}
#intro .content {
width: 395px;
font-size: 18px;
line-height: 45px;
text-align: center;
}
#intro .content-row {
display: flex;
align-items: center;
}
#intro .content-row label {
flex-basis: 35px;
text-align: right;
}
#intro .content-row input {
flex: 1;
height: 32px;
padding: 0 10px;
margin-left: 10px;
border: 1px solid #cacaca;
border-radius: 2px;
text-align: center;
font-size: 14px;
}
</style>
</head>
<body>
<div id="intro">
<img src="icons/128.png" alt="" class="logo">
<h2 class="title">
Waiting for connection...
</h2>
<div class="content">
<div class="content-row">
<label for="script-localhost">Add</label>
<input type="text" id="script-localhost">
</div>
<div class="content-row">
<label for="script-byip">Or</label>
<input type="text" id="script-byip">
</div>
to the top of the page you want to debug.
</div>
</div>
<div id="app">
</div>
<script>
const port = process.env.PORT || 8098
const localIp = require('ip').address();
const $ = document.querySelector.bind(document)
const $localhost = $('#script-localhost')
const $byIp = $('#script-byip')
$localhost.value = '<' + 'script src="http://localhost:' + port + '"><' + '/script>'
$byIp.value = '<' + 'script src="http://' + localIp + ':' + port + '"><' + '/script>'
function selectAll () {
this.selectionStart = 0
this.selectionEnd = this.value.length
}
$localhost.onclick = selectAll
$byIp.onclick = selectAll
</script>
<script src="build/devtools.js"></script>
</body>
</html>