Instalé la extensión vue js y para algunas otras páginas que creé, funciona. Pero para mi sitio web actual, no se muestra en la pestaña de elementos de inspección, aunque vue js todavía se ejecuta correctamente.
Si es necesario, aquí está mi html y js para el sitio web en el que no se muestran las herramientas de desarrollo.
<!doctype html> <html lang="en"> <head> <title>Title</title> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link rel="stylesheet" href="styles.css"> <!-- Bootstrap CSS --> </head> <body class="container mt-4"> <div id="app"> <h2>{{name}}</h2> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <script src="script.js"></script> </html>Vaya al directorio con sus archivos index.html + JS, luego ejecute npx serve y verá aparecer las herramientas de desarrollo.
Debe ejecutar un servidor liviano para servir los archivos correctamente, esta solución simple hará el trabajo y mostrará las herramientas de desarrollo en consecuencia.
Además, intente alternar sus herramientas de desarrollo (ocultarlas y mostrarlas).
O matar y recuperar la pestaña nuevamente, a veces lo necesita.