\u00cdndice – Instalaci\u00f3n de WordPress en Debian<\/title>\n <style>\n \/* Estilos para el \u00edndice *\/\n .index {\n background-color: #f4f4f4;\n border: 1px solid #ddd;\n border-radius: 10px;\n box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);\n padding: 20px;\n margin-bottom: 20px;\n }\n\n .index h2 {\n font-size: 1.8em;\n color: #333;\n margin-bottom: 10px;\n }\n\n .index ul {\n list-style-type: none;\n padding: 0;\n }\n\n .index li {\n margin: 6px 0;\n padding-left: 10px;\n border-left: 4px solid transparent;\n transition: transform 0.2s;\n }\n\n .index a {\n text-decoration: none;\n color: #0073e6;\n font-weight: bold;\n transition: color 0.3s;\n }\n\n .index a:hover {\n color: #0052a5;\n }\n\n .index li:hover {\n transform: scale(1.05);\n }\n\n .index .nivel-1 {\n margin-left: 5px;\n border-left-color: #0073e6;\n }\n\n .index .nivel-2 {\n margin-left: 20px;\n border-left-color: #0052a5;\n }\n\n .index .nivel-3 {\n margin-left: 35px;\n border-left-color: #003b73;\n }\n\n .code-container {\n position: relative;\n border: 1px solid #ddd;\n border-radius: 4px;\n background: #f8f8f8;\n margin: 8px 0;\n padding: 15px;\n font-family: monospace;\n overflow: auto;\n }\n\n .copy-button {\n position: absolute;\n top: 10px;\n right: 10px;\n background: #0078D7;\n color: white;\n border: none;\n border-radius: 3px;\n padding: 6px 10px;\n font-size: 12px;\n cursor: pointer;\n }\n\n .copy-button:hover {\n background: #005A9E;\n }\n\n .custom-pre {\n margin: 0;\n padding: 10px;\n overflow-x: auto;\n }\n\n .custom-p {\n margin: 6px 0;\n line-height: 1.6;\n }\n\n .custom-ul {\n margin: 6px 0;\n }\n\n .custom-h3,\n .custom-h4,\n .custom-h5 {\n margin: 15px 0 8px;\n }\n\n .custom-h3 {\n font-size: 1.8em;\n color: #2c3e50;\n font-weight: bold;\n margin-top: 20px;\n margin-bottom: 10px;\n border-bottom: 2px solid #3498db;\n padding-bottom: 5px;\n }\n\n .custom-h4 {\n font-size: 1.4em;\n color: #34495e;\n font-weight: bold;\n margin-top: 15px;\n margin-bottom: 8px;\n padding-left: 10px;\n border-left: 4px solid #3498db;\n }\n\n .custom-h5 {\n font-size: 1.2em;\n color: #4a5568;\n \/* Un color m\u00e1s suave para marcar la jerarqu\u00eda *\/\n font-weight: bold;\n margin-top: 12px;\n margin-bottom: 6px;\n padding-left: 8px;\n border-left: 3px solid #3498db;\n \/* Un borde similar al h4 pero m\u00e1s delgado *\/\n }\n\n .custom-code {\n background-color: #f4f4f4;\n padding: 2px 4px;\n border-radius: 4px;\n }\n\n .image-row {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 20px;\n margin-bottom: 20px;\n }\n\n .image-container {\n text-align: center;\n }\n\n .styled-image {\n max-width: 100%;\n height: auto;\n border-radius: 5px;\n border: 2px solid #ccc;\n margin: 10px 0;\n }\n <\/style>\n<\/head>\n\n<body>\n\n <p class=\"custom-p\">Live Preview es una extensi\u00f3n oficial de Visual Studio Code que permite visualizar en tiempo\n real los cambios realizados en archivos HTML, CSS y JavaScript directamente en el navegador. Esto es\n especialmente \u00fatil para desarrolladores web que desean ver actualizaciones autom\u00e1ticas al guardar o modificar\n archivos sin tener que recargar la p\u00e1gina manualmente.\n Contin\u00faa leyendo o, si prefieres, haz\n <a href=\"https:\/\/youtu.be\/2vG0Bto71-A\" target=\"_blank\" rel=\"noopener noreferrer\">CLICK AQU\u00cd<\/a>\n para ver un tutorial paso a paso en YouTube\n <img decoding=\"async\" src=\"https:\/\/elasvi.com\/wp-content\/uploads\/2025\/01\/YouTube_icon.png\" alt=\"YouTube\"\n style=\"width: 20px; vertical-align: middle;\">\n <\/p>\n <div class=\"index\">\n <h2>Contenido:<\/h2>\n <ul class=\"custom-ul\">\n <li class=\"nivel-1\"><a href=\"#section1\">1. Caracter\u00edsticas principales<\/a><\/li>\n\n <li class=\"nivel-1\"><a href=\"#section2\">2. C\u00f3mo instalar Live Preview en VS Code<\/a><\/li>\n\n <li class=\"nivel-1\"><a href=\"#section3\">3. C\u00f3mo usar Live Preview<\/a><\/li>\n\n <li class=\"nivel-1\"><a href=\"#section4\">4. Diferencias entre Live Preview y Live Server<\/a><\/li>\n\n <li class=\"nivel-1\"><a href=\"#section5\">5. Errores comunes y soluciones<\/a><\/li>\n\n <li class=\"nivel-1\"><a href=\"#section6\">6. Alternativas a Live Preview<\/a><\/li>\n <\/ul>\n <\/div>\n\n <h3 id=\"section1\" class=\"custom-h3\">1. Caracter\u00edsticas principales<\/h3>\n <ul class=\"custom-ul\">\n <li>\ud83c\udf10 <strong>Vista previa en tiempo real:<\/strong> Muestra los cambios al instante conforme editas tu c\u00f3digo.\n <\/li>\n <li>\ud83d\udd12 <strong>Soporte para HTTPS:<\/strong> Permite previsualizaciones seguras si tu proyecto lo requiere.<\/li>\n <li>\ud83d\udee1\ufe0f <strong>Seguridad personalizada:<\/strong> Configura niveles de seguridad para evitar la carga de scripts\n no deseados.<\/li>\n <li>\ud83d\udd04 <strong>Actualizaci\u00f3n autom\u00e1tica:<\/strong> Se refresca autom\u00e1ticamente al guardar los archivos.<\/li>\n <li>\ud83d\udcc2 <strong>Soporte para carpetas de trabajo y servidores locales:<\/strong> Puedes iniciar la vista previa\n desde cualquier directorio de tu proyecto.<\/li>\n <\/ul>\n\n <h3 id=\"section2\" class=\"custom-h3\">2. C\u00f3mo instalar Live Preview en VS Code<\/h3>\n <ol class=\"custom-ol\">\n <li><strong>Desde el Marketplace de Extensiones:<\/strong><\/li>\n <ul class=\"custom-ul\">\n <li>Abre VS Code.<\/li>\n <li>Haz clic en el icono de Extensiones (o presiona Ctrl+Shift+X \/ Cmd+Shift+X).<\/li>\n\n <div class=\"image-container\">\n <img decoding=\"async\" src=\"https:\/\/elasvi.com\/wp-content\/uploads\/2025\/03\/01.png\" alt=\"Imagen individual\"\n class=\"styled-image\">\n <\/div>\n <li>Busca \u00abLive Preview\u00bb en la barra de b\u00fasqueda.<\/li>\n <li>Haz clic en Instalar en la extensi\u00f3n desarrollada por Microsoft.<\/li>\n\n <div class=\"image-container\">\n <img decoding=\"async\" src=\"https:\/\/elasvi.com\/wp-content\/uploads\/2025\/03\/02.png\" alt=\"Imagen individual\"\n class=\"styled-image\">\n <\/div>\n <\/ul>\n <li><strong>Instalaci\u00f3n r\u00e1pida desde la terminal de VS Code:<\/strong><\/li>\n <ul class=\"custom-ul\">\n <li>Abra una terminal y ejecute el siguiente comando.<\/li>\n <\/ul>\n\n <div class=\"code-container\">\n <button class=\"copy-button\" onclick=\"copyCode(this)\">Copiar<\/button>\n <pre class=\"custom-pre\"><code>code --install-extension ms-vscode.live-server<\/code><\/pre>\n <\/div>\n\n <div class=\"image-container\">\n <img decoding=\"async\" src=\"https:\/\/elasvi.com\/wp-content\/uploads\/2025\/03\/03.png\" alt=\"Imagen individual\"\n class=\"styled-image\">\n <\/div>\n\n <div class=\"image-container\">\n <img decoding=\"async\" src=\"https:\/\/elasvi.com\/wp-content\/uploads\/2025\/03\/04.png\" alt=\"Imagen individual\"\n class=\"styled-image\">\n <\/div>\n <\/ol>\n <script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-2225321393472807\"\n crossorigin=\"anonymous\"><\/script>\n <ins class=\"adsbygoogle\" style=\"display:block; text-align:center;\" data-ad-layout=\"in-article\"\n data-ad-format=\"fluid\" data-ad-client=\"ca-pub-2225321393472807\" data-ad-slot=\"4989322001\"><\/ins>\n <script>\n (adsbygoogle = window.adsbygoogle || []).push({});\n <\/script>\n\n <h3 id=\"section3\" class=\"custom-h3\">3. C\u00f3mo usar Live Preview<\/h3>\n <ol class=\"custom-ol\">\n <li>Abrir un archivo HTML:<\/li>\n <ul class=\"custom-ul\">\n <li>Abre el archivo que deseas previsualizar.<\/li>\n <\/ul>\n <li>Iniciar la vista previa:<\/li>\n <ul class=\"custom-ul\">\n <li>Usa el atajo desde la paleta de comandos (Ctrl+Shift+P \/ Cmd+Shift+P) y escribe <strong>\u00abLive Preview:\n Show Preview\u00bb<\/strong>.<\/li>\n <ul class=\"custom-ul\">\n <li>Si seleccionas External browser, la vista previa se abrir\u00e1 en un navegador externo.<\/li>\n <li>Si seleccionas Internal browser, la vista previa se mostrar\u00e1 dentro del editor.<\/li>\n\n <div class=\"image-container\">\n <img decoding=\"async\" src=\"https:\/\/elasvi.com\/wp-content\/uploads\/2025\/03\/05.png\" alt=\"Imagen individual\"\n class=\"styled-image\">\n <\/div>\n <\/ul>\n\n <div class=\"image-container\">\n <img decoding=\"async\" src=\"https:\/\/elasvi.com\/wp-content\/uploads\/2025\/03\/06.png\" alt=\"Imagen individual\"\n class=\"styled-image\">\n <\/div>\n <li>O haz clic derecho sobre el archivo y selecciona <strong>\u00abOpen with Live Preview\u00bb<\/strong>.<\/li>\n\n <div class=\"image-container\">\n <img decoding=\"async\" src=\"https:\/\/elasvi.com\/wp-content\/uploads\/2025\/03\/07.png\" alt=\"Imagen individual\"\n class=\"styled-image\">\n <\/div>\n <li>Puedes seguir editando el archivo y observar en tiempo real los cambios realizados en archivos HTML, CSS\n y JavaScript directamente en el navegador.<\/li>\n\n <div class=\"image-container\">\n <img decoding=\"async\" src=\"https:\/\/elasvi.com\/wp-content\/uploads\/2025\/03\/08.png\" alt=\"Imagen individual\"\n class=\"styled-image\">\n <\/div>\n <\/ul>\n <li>Detener la vista previa:<\/li>\n <ul class=\"custom-ul\">\n <li>En la barra inferior encontrar\u00e1s un bot\u00f3n para detener el servidor de Live Preview.<\/li>\n <li>O simplemente cierra la pesta\u00f1a.<\/li>\n <\/ul>\n <\/ol>\n <script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-2225321393472807\"\n crossorigin=\"anonymous\"><\/script>\n <ins class=\"adsbygoogle\" style=\"display:block; text-align:center;\" data-ad-layout=\"in-article\"\n data-ad-format=\"fluid\" data-ad-client=\"ca-pub-2225321393472807\" data-ad-slot=\"4989322001\"><\/ins>\n <script>\n (adsbygoogle = window.adsbygoogle || []).push({});\n <\/script>\n\n <h3 id=\"section4\" class=\"custom-h3\">4. Diferencias entre Live Preview y Live Server<\/h3>\n <ul class=\"custom-ul\">\n <li><strong>Live Preview<\/strong> es la extensi\u00f3n oficial de Microsoft, dise\u00f1ada para integrarse perfectamente\n con VS Code.<\/li>\n <li><strong>Live Server<\/strong> (de Ritwick Dey) es una alternativa popular, pero ahora Live Preview se\n recomienda oficialmente por su soporte continuo y mejor integraci\u00f3n.<\/li>\n <\/ul>\n\n <h3 id=\"section5\" class=\"custom-h3\">5. Errores comunes y soluciones<\/h3>\n <strong>Error:<\/strong> No se abre el navegador:<ul class=\"custom-ul\">\n <li>Verifica que no tengas conflictos con otros servidores en el mismo puerto.<\/li>\n <li>Cambia el puerto en la configuraci\u00f3n.<\/li>\n <\/ul><strong>Error:<\/strong> La vista previa no actualiza autom\u00e1ticamente:<ul class=\"custom-ul\">\n <li>Aseg\u00farate de haber guardado el archivo.<\/li>\n <li>Revisa las configuraciones de seguridad.<\/li>\n <\/ul>\n\n <h3 id=\"section6\" class=\"custom-h3\">6. Alternativas a Live Preview<\/h3>\n <ul class=\"custom-ul\">\n <li><strong>Live Server:<\/strong> Otra extensi\u00f3n popular para proyectos web.<\/li>\n <li><strong>BrowserSync:<\/strong> Herramienta m\u00e1s avanzada para sincronizaci\u00f3n entre dispositivos.<\/li>\n <li><strong>Vite o Webpack Dev Server:<\/strong> Para proyectos modernos con frameworks como React, Vue o\n Angular.<\/li>\n <\/ul>\n <script>\n function copyCode(button) {\n navigator.clipboard.writeText(button.nextElementSibling.innerText);\n button.textContent = '\u00a1Copiado!';\n setTimeout(() => button.textContent = 'Copiar', 2000);\n }\n <\/script>\n\n<\/body>\n\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Live Preview es una extensi\u00f3n oficial de Visual Studio Code que permite visualizar en tiempo real los cambios realizados en archivos HTML, CSS y JavaScript directamente en el navegador. Esto es especialmente \u00fatil para desarrolladores web que desean ver actualizaciones autom\u00e1ticas al guardar o modificar archivos sin tener que recargar la p\u00e1gina manualmente.<\/p>\n","protected":false},"author":1,"featured_media":4073,"comment_status":"open","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[171,30],"tags":[170,29],"class_list":["post-4060","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-live-preview","category-visual-studio-code","tag-live-preview","tag-visual-studio-code"],"_links":{"self":[{"href":"https:\/\/elasvi.com\/index.php\/wp-json\/wp\/v2\/posts\/4060","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elasvi.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elasvi.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elasvi.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/elasvi.com\/index.php\/wp-json\/wp\/v2\/comments?post=4060"}],"version-history":[{"count":4,"href":"https:\/\/elasvi.com\/index.php\/wp-json\/wp\/v2\/posts\/4060\/revisions"}],"predecessor-version":[{"id":4072,"href":"https:\/\/elasvi.com\/index.php\/wp-json\/wp\/v2\/posts\/4060\/revisions\/4072"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elasvi.com\/index.php\/wp-json\/wp\/v2\/media\/4073"}],"wp:attachment":[{"href":"https:\/\/elasvi.com\/index.php\/wp-json\/wp\/v2\/media?parent=4060"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elasvi.com\/index.php\/wp-json\/wp\/v2\/categories?post=4060"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elasvi.com\/index.php\/wp-json\/wp\/v2\/tags?post=4060"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":4060,"date":"2025-03-11T08:00:00","date_gmt":"2025-03-11T08:00:00","guid":{"rendered":"https:\/\/elasvi.com\/?p=4060"},"modified":"2025-03-03T20:09:16","modified_gmt":"2025-03-03T20:09:16","slug":"live-preview-la-extension-de-vs-code-como-visualizar-tu-codigo-en-tiempo-real","status":"publish","type":"post","link":"https:\/\/elasvi.com\/index.php\/2025\/03\/11\/live-preview-la-extension-de-vs-code-como-visualizar-tu-codigo-en-tiempo-real\/","title":{"rendered":"Live Preview, la Extensi\u00f3n de VS Code: C\u00f3mo Visualizar tu C\u00f3digo en Tiempo Real"},"content":{"rendered":"\n\n\n\n\n \n \n \u00cdndice – Instalaci\u00f3n de WordPress en Debian<\/title>\n <style>\n \/* Estilos para el \u00edndice *\/\n .index {\n background-color: #f4f4f4;\n border: 1px solid #ddd;\n border-radius: 10px;\n box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);\n padding: 20px;\n margin-bottom: 20px;\n }\n\n .index h2 {\n font-size: 1.8em;\n color: #333;\n margin-bottom: 10px;\n }\n\n .index ul {\n list-style-type: none;\n padding: 0;\n }\n\n .index li {\n margin: 6px 0;\n padding-left: 10px;\n border-left: 4px solid transparent;\n transition: transform 0.2s;\n }\n\n .index a {\n text-decoration: none;\n color: #0073e6;\n font-weight: bold;\n transition: color 0.3s;\n }\n\n .index a:hover {\n color: #0052a5;\n }\n\n .index li:hover {\n transform: scale(1.05);\n }\n\n .index .nivel-1 {\n margin-left: 5px;\n border-left-color: #0073e6;\n }\n\n .index .nivel-2 {\n margin-left: 20px;\n border-left-color: #0052a5;\n }\n\n .index .nivel-3 {\n margin-left: 35px;\n border-left-color: #003b73;\n }\n\n .code-container {\n position: relative;\n border: 1px solid #ddd;\n border-radius: 4px;\n background: #f8f8f8;\n margin: 8px 0;\n padding: 15px;\n font-family: monospace;\n overflow: auto;\n }\n\n .copy-button {\n position: absolute;\n top: 10px;\n right: 10px;\n background: #0078D7;\n color: white;\n border: none;\n border-radius: 3px;\n padding: 6px 10px;\n font-size: 12px;\n cursor: pointer;\n }\n\n .copy-button:hover {\n background: #005A9E;\n }\n\n .custom-pre {\n margin: 0;\n padding: 10px;\n overflow-x: auto;\n }\n\n .custom-p {\n margin: 6px 0;\n line-height: 1.6;\n }\n\n .custom-ul {\n margin: 6px 0;\n }\n\n .custom-h3,\n .custom-h4,\n .custom-h5 {\n margin: 15px 0 8px;\n }\n\n .custom-h3 {\n font-size: 1.8em;\n color: #2c3e50;\n font-weight: bold;\n margin-top: 20px;\n margin-bottom: 10px;\n border-bottom: 2px solid #3498db;\n padding-bottom: 5px;\n }\n\n .custom-h4 {\n font-size: 1.4em;\n color: #34495e;\n font-weight: bold;\n margin-top: 15px;\n margin-bottom: 8px;\n padding-left: 10px;\n border-left: 4px solid #3498db;\n }\n\n .custom-h5 {\n font-size: 1.2em;\n color: #4a5568;\n \/* Un color m\u00e1s suave para marcar la jerarqu\u00eda *\/\n font-weight: bold;\n margin-top: 12px;\n margin-bottom: 6px;\n padding-left: 8px;\n border-left: 3px solid #3498db;\n \/* Un borde similar al h4 pero m\u00e1s delgado *\/\n }\n\n .custom-code {\n background-color: #f4f4f4;\n padding: 2px 4px;\n border-radius: 4px;\n }\n\n .image-row {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 20px;\n margin-bottom: 20px;\n }\n\n .image-container {\n text-align: center;\n }\n\n .styled-image {\n max-width: 100%;\n height: auto;\n border-radius: 5px;\n border: 2px solid #ccc;\n margin: 10px 0;\n }\n <\/style>\n<\/head>\n\n<body>\n\n <p class=\"custom-p\">Live Preview es una extensi\u00f3n oficial de Visual Studio Code que permite visualizar en tiempo\n real los cambios realizados en archivos HTML, CSS y JavaScript directamente en el navegador. Esto es\n especialmente \u00fatil para desarrolladores web que desean ver actualizaciones autom\u00e1ticas al guardar o modificar\n archivos sin tener que recargar la p\u00e1gina manualmente.\n Contin\u00faa leyendo o, si prefieres, haz\n <a href=\"https:\/\/youtu.be\/2vG0Bto71-A\" target=\"_blank\" rel=\"noopener noreferrer\">CLICK AQU\u00cd<\/a>\n para ver un tutorial paso a paso en YouTube\n <img decoding=\"async\" src=\"https:\/\/elasvi.com\/wp-content\/uploads\/2025\/01\/YouTube_icon.png\" alt=\"YouTube\"\n style=\"width: 20px; vertical-align: middle;\">\n <\/p>\n <div class=\"index\">\n <h2>Contenido:<\/h2>\n <ul class=\"custom-ul\">\n <li class=\"nivel-1\"><a href=\"#section1\">1. Caracter\u00edsticas principales<\/a><\/li>\n\n <li class=\"nivel-1\"><a href=\"#section2\">2. C\u00f3mo instalar Live Preview en VS Code<\/a><\/li>\n\n <li class=\"nivel-1\"><a href=\"#section3\">3. C\u00f3mo usar Live Preview<\/a><\/li>\n\n <li class=\"nivel-1\"><a href=\"#section4\">4. Diferencias entre Live Preview y Live Server<\/a><\/li>\n\n <li class=\"nivel-1\"><a href=\"#section5\">5. Errores comunes y soluciones<\/a><\/li>\n\n <li class=\"nivel-1\"><a href=\"#section6\">6. Alternativas a Live Preview<\/a><\/li>\n <\/ul>\n <\/div>\n\n <h3 id=\"section1\" class=\"custom-h3\">1. Caracter\u00edsticas principales<\/h3>\n <ul class=\"custom-ul\">\n <li>\ud83c\udf10 <strong>Vista previa en tiempo real:<\/strong> Muestra los cambios al instante conforme editas tu c\u00f3digo.\n <\/li>\n <li>\ud83d\udd12 <strong>Soporte para HTTPS:<\/strong> Permite previsualizaciones seguras si tu proyecto lo requiere.<\/li>\n <li>\ud83d\udee1\ufe0f <strong>Seguridad personalizada:<\/strong> Configura niveles de seguridad para evitar la carga de scripts\n no deseados.<\/li>\n <li>\ud83d\udd04 <strong>Actualizaci\u00f3n autom\u00e1tica:<\/strong> Se refresca autom\u00e1ticamente al guardar los archivos.<\/li>\n <li>\ud83d\udcc2 <strong>Soporte para carpetas de trabajo y servidores locales:<\/strong> Puedes iniciar la vista previa\n desde cualquier directorio de tu proyecto.<\/li>\n <\/ul>\n\n <h3 id=\"section2\" class=\"custom-h3\">2. C\u00f3mo instalar Live Preview en VS Code<\/h3>\n <ol class=\"custom-ol\">\n <li><strong>Desde el Marketplace de Extensiones:<\/strong><\/li>\n <ul class=\"custom-ul\">\n <li>Abre VS Code.<\/li>\n <li>Haz clic en el icono de Extensiones (o presiona Ctrl+Shift+X \/ Cmd+Shift+X).<\/li>\n\n <div class=\"image-container\">\n <img decoding=\"async\" src=\"https:\/\/elasvi.com\/wp-content\/uploads\/2025\/03\/01.png\" alt=\"Imagen individual\"\n class=\"styled-image\">\n <\/div>\n <li>Busca \u00abLive Preview\u00bb en la barra de b\u00fasqueda.<\/li>\n <li>Haz clic en Instalar en la extensi\u00f3n desarrollada por Microsoft.<\/li>\n\n <div class=\"image-container\">\n <img decoding=\"async\" src=\"https:\/\/elasvi.com\/wp-content\/uploads\/2025\/03\/02.png\" alt=\"Imagen individual\"\n class=\"styled-image\">\n <\/div>\n <\/ul>\n <li><strong>Instalaci\u00f3n r\u00e1pida desde la terminal de VS Code:<\/strong><\/li>\n <ul class=\"custom-ul\">\n <li>Abra una terminal y ejecute el siguiente comando.<\/li>\n <\/ul>\n\n <div class=\"code-container\">\n <button class=\"copy-button\" onclick=\"copyCode(this)\">Copiar<\/button>\n <pre class=\"custom-pre\"><code>code --install-extension ms-vscode.live-server<\/code><\/pre>\n <\/div>\n\n <div class=\"image-container\">\n <img decoding=\"async\" src=\"https:\/\/elasvi.com\/wp-content\/uploads\/2025\/03\/03.png\" alt=\"Imagen individual\"\n class=\"styled-image\">\n <\/div>\n\n <div class=\"image-container\">\n <img decoding=\"async\" src=\"https:\/\/elasvi.com\/wp-content\/uploads\/2025\/03\/04.png\" alt=\"Imagen individual\"\n class=\"styled-image\">\n <\/div>\n <\/ol>\n <script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-2225321393472807\"\n crossorigin=\"anonymous\"><\/script>\n <ins class=\"adsbygoogle\" style=\"display:block; text-align:center;\" data-ad-layout=\"in-article\"\n data-ad-format=\"fluid\" data-ad-client=\"ca-pub-2225321393472807\" data-ad-slot=\"4989322001\"><\/ins>\n <script>\n (adsbygoogle = window.adsbygoogle || []).push({});\n <\/script>\n\n <h3 id=\"section3\" class=\"custom-h3\">3. C\u00f3mo usar Live Preview<\/h3>\n <ol class=\"custom-ol\">\n <li>Abrir un archivo HTML:<\/li>\n <ul class=\"custom-ul\">\n <li>Abre el archivo que deseas previsualizar.<\/li>\n <\/ul>\n <li>Iniciar la vista previa:<\/li>\n <ul class=\"custom-ul\">\n <li>Usa el atajo desde la paleta de comandos (Ctrl+Shift+P \/ Cmd+Shift+P) y escribe <strong>\u00abLive Preview:\n Show Preview\u00bb<\/strong>.<\/li>\n <ul class=\"custom-ul\">\n <li>Si seleccionas External browser, la vista previa se abrir\u00e1 en un navegador externo.<\/li>\n <li>Si seleccionas Internal browser, la vista previa se mostrar\u00e1 dentro del editor.<\/li>\n\n <div class=\"image-container\">\n <img decoding=\"async\" src=\"https:\/\/elasvi.com\/wp-content\/uploads\/2025\/03\/05.png\" alt=\"Imagen individual\"\n class=\"styled-image\">\n <\/div>\n <\/ul>\n\n <div class=\"image-container\">\n <img decoding=\"async\" src=\"https:\/\/elasvi.com\/wp-content\/uploads\/2025\/03\/06.png\" alt=\"Imagen individual\"\n class=\"styled-image\">\n <\/div>\n <li>O haz clic derecho sobre el archivo y selecciona <strong>\u00abOpen with Live Preview\u00bb<\/strong>.<\/li>\n\n <div class=\"image-container\">\n <img decoding=\"async\" src=\"https:\/\/elasvi.com\/wp-content\/uploads\/2025\/03\/07.png\" alt=\"Imagen individual\"\n class=\"styled-image\">\n <\/div>\n <li>Puedes seguir editando el archivo y observar en tiempo real los cambios realizados en archivos HTML, CSS\n y JavaScript directamente en el navegador.<\/li>\n\n <div class=\"image-container\">\n <img decoding=\"async\" src=\"https:\/\/elasvi.com\/wp-content\/uploads\/2025\/03\/08.png\" alt=\"Imagen individual\"\n class=\"styled-image\">\n <\/div>\n <\/ul>\n <li>Detener la vista previa:<\/li>\n <ul class=\"custom-ul\">\n <li>En la barra inferior encontrar\u00e1s un bot\u00f3n para detener el servidor de Live Preview.<\/li>\n <li>O simplemente cierra la pesta\u00f1a.<\/li>\n <\/ul>\n <\/ol>\n <script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-2225321393472807\"\n crossorigin=\"anonymous\"><\/script>\n <ins class=\"adsbygoogle\" style=\"display:block; text-align:center;\" data-ad-layout=\"in-article\"\n data-ad-format=\"fluid\" data-ad-client=\"ca-pub-2225321393472807\" data-ad-slot=\"4989322001\"><\/ins>\n <script>\n (adsbygoogle = window.adsbygoogle || []).push({});\n <\/script>\n\n <h3 id=\"section4\" class=\"custom-h3\">4. Diferencias entre Live Preview y Live Server<\/h3>\n <ul class=\"custom-ul\">\n <li><strong>Live Preview<\/strong> es la extensi\u00f3n oficial de Microsoft, dise\u00f1ada para integrarse perfectamente\n con VS Code.<\/li>\n <li><strong>Live Server<\/strong> (de Ritwick Dey) es una alternativa popular, pero ahora Live Preview se\n recomienda oficialmente por su soporte continuo y mejor integraci\u00f3n.<\/li>\n <\/ul>\n\n <h3 id=\"section5\" class=\"custom-h3\">5. Errores comunes y soluciones<\/h3>\n <strong>Error:<\/strong> No se abre el navegador:<ul class=\"custom-ul\">\n <li>Verifica que no tengas conflictos con otros servidores en el mismo puerto.<\/li>\n <li>Cambia el puerto en la configuraci\u00f3n.<\/li>\n <\/ul><strong>Error:<\/strong> La vista previa no actualiza autom\u00e1ticamente:<ul class=\"custom-ul\">\n <li>Aseg\u00farate de haber guardado el archivo.<\/li>\n <li>Revisa las configuraciones de seguridad.<\/li>\n <\/ul>\n\n <h3 id=\"section6\" class=\"custom-h3\">6. Alternativas a Live Preview<\/h3>\n <ul class=\"custom-ul\">\n <li><strong>Live Server:<\/strong> Otra extensi\u00f3n popular para proyectos web.<\/li>\n <li><strong>BrowserSync:<\/strong> Herramienta m\u00e1s avanzada para sincronizaci\u00f3n entre dispositivos.<\/li>\n <li><strong>Vite o Webpack Dev Server:<\/strong> Para proyectos modernos con frameworks como React, Vue o\n Angular.<\/li>\n <\/ul>\n <script>\n function copyCode(button) {\n navigator.clipboard.writeText(button.nextElementSibling.innerText);\n button.textContent = '\u00a1Copiado!';\n setTimeout(() => button.textContent = 'Copiar', 2000);\n }\n <\/script>\n\n<\/body>\n\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Live Preview es una extensi\u00f3n oficial de Visual Studio Code que permite visualizar en tiempo real los cambios realizados en archivos HTML, CSS y JavaScript directamente en el navegador. Esto es especialmente \u00fatil para desarrolladores web que desean ver actualizaciones autom\u00e1ticas al guardar o modificar archivos sin tener que recargar la p\u00e1gina manualmente.<\/p>\n","protected":false},"author":1,"featured_media":4073,"comment_status":"open","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[171,30],"tags":[170,29],"class_list":["post-4060","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-live-preview","category-visual-studio-code","tag-live-preview","tag-visual-studio-code"],"_links":{"self":[{"href":"https:\/\/elasvi.com\/index.php\/wp-json\/wp\/v2\/posts\/4060","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elasvi.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elasvi.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elasvi.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/elasvi.com\/index.php\/wp-json\/wp\/v2\/comments?post=4060"}],"version-history":[{"count":4,"href":"https:\/\/elasvi.com\/index.php\/wp-json\/wp\/v2\/posts\/4060\/revisions"}],"predecessor-version":[{"id":4072,"href":"https:\/\/elasvi.com\/index.php\/wp-json\/wp\/v2\/posts\/4060\/revisions\/4072"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elasvi.com\/index.php\/wp-json\/wp\/v2\/media\/4073"}],"wp:attachment":[{"href":"https:\/\/elasvi.com\/index.php\/wp-json\/wp\/v2\/media?parent=4060"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elasvi.com\/index.php\/wp-json\/wp\/v2\/categories?post=4060"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elasvi.com\/index.php\/wp-json\/wp\/v2\/tags?post=4060"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}