Uso del Editor Web de GitHub para Edición Rápida de Archivos

Contenido del curso

Fundamentos de Git y control de versiones

Introducción a GitHub

Herramientas de colaboración en GitHub

GitHub Codespaces

Seguridad y buenas prácticas en GitHub

Administración de GitHub

Gestión de Cambios con Pull Requests

GitHub Releases

Cierre

42
Pro tips ocultos de GitHub para trabajar mejor
10:13 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:005:49

Uso del Editor Web de GitHub para Edición Rápida de Archivos

Curso de Git y GitHub

Clase 29 de 42

Clase 29 / 42

Recursos

Dentro de cualquier repositorio de GitHub existe un editor de texto integrado al que puedes acceder con solo presionar un punto (".") en tu teclado. Esta herramienta, conocida como GitHub Dev Editor, ofrece una interfaz visual muy similar a Visual Studio Code directamente en el navegador, sin necesidad de instalar nada ni consumir recursos en la nube. Aunque puede pasar desapercibida durante años, resulta extremadamente útil para correcciones rápidas.

¿Cómo se accede al GitHub Dev Editor?

Desde la portada de cualquier repositorio o cualquier ubicación dentro de él, basta con presionar la tecla punto (".") para que GitHub redirija automáticamente a un editor web [01:03]. En cuestión de segundos, el entorno carga todos los archivos del proyecto con una interfaz familiar: explorador de archivos a la izquierda, editor con números de línea al centro y preview de archivos como el readme.

Una vez dentro, puedes:

Editar cualquier archivo del proyecto, no solo el readme.
Ver los cambios reflejados en el ícono de control de versiones.
Realizar un commit y push directamente desde el editor con un mensaje descriptivo [02:00].

El flujo es simple: abres el editor, haces la modificación, cierras la pestaña del archivo para guardar y luego ejecutas el commit. Para regresar al repositorio original, puedes ir al menú de tres líneas horizontales y seleccionar "Go to repository" [02:30], lo que abre una nueva pestaña donde confirmas que los cambios ya están aplicados.

¿Cuál es la diferencia entre el Dev Editor y un CodeSpace?

Aunque la interfaz del Dev Editor se parece mucho a la de un GitHub CodeSpace, la diferencia es fundamental: el Dev Editor es únicamente un editor de texto [03:07]. No cuenta con terminal integrada ni permite compilar, ejecutar o probar código. Si intentas abrir una terminal, el propio editor te sugiere migrar a un CodeSpace.

En cambio, un CodeSpace es una instancia completa en la nube que funciona como un entorno de desarrollo remoto. Incluye terminal, extensiones, compiladores y todo lo necesario para ejecutar un proyecto de principio a fin.

¿Cuándo conviene usar cada herramienta?

La decisión depende de dos factores: la complejidad de la tarea y el costo [04:05].

Dev Editor: ideal para corregir errores ortográficos en la documentación, eliminar código comentado que se dejó por error o modificar unas pocas líneas. Es gratuito y no consume recursos.
CodeSpace: necesario cuando requieres compilar, ejecutar pruebas o trabajar con un entorno de desarrollo completo. Tiene un costo asociado que se genera en tu cuenta una vez que superas las horas gratuitas mensuales incluidas en tu plan.

¿Para qué casos prácticos resulta más útil el Dev Editor?

El GitHub Dev Editor brilla en situaciones cotidianas donde abrir un entorno completo sería excesivo [03:30]:

Corregir un comentario adicional que quedó en el código.
Arreglar un error ortográfico en la documentación del proyecto.
Editar archivos de configuración con cambios menores.
Revisar visualmente la estructura de varios archivos sin descargar el repositorio.

En lugar de editar el archivo "en crudo" usando el pequeño ícono de lápiz que GitHub ofrece por defecto, el Dev Editor proporciona una experiencia visual mucho más cómoda con resaltado de sintaxis y navegación entre archivos.

El balance entre estas dos herramientas —edición rápida gratuita con el Dev Editor y entorno de desarrollo remoto con CodeSpaces— representa el cierre natural del trabajo colaborativo en GitHub. Si ya conocías el editor de lápiz pero no este atajo, pruébalo en tu próximo repositorio y comparte qué tan útil te resulta para tus flujos de trabajo diarios.

Mario Alexander Vargas Celis

Hace 2 años

📝 Cómo Usar GitHub.dev Editor

GitHub.dev es un editor basado en la web que te permite modificar y visualizar archivos en repositorios de GitHub sin necesidad de clonar el proyecto ni instalar software adicional. Es una versión ligera de Visual Studio Code en el navegador, ideal para ediciones rápidas y colaboración en proyectos.

🚀 1️⃣ Acceder a GitHub.dev

📌 Método 1: Atajo de Teclado

Abre un repositorio en GitHub.
Presiona . (punto) en tu teclado.
Se abrirá GitHub.dev en una nueva pestaña.

📌 Método 2: URL Manual

Abre un repositorio en GitHub.
Cambia github.com por github.dev en la barra de direcciones.
- Ejemplo:https://github.com/usuario/repositorio ➝ Cambiar a:https://github.dev/usuario/repositorio

⚙️ 2️⃣ Funcionalidades de GitHub.dev

📂 Navegación y Edición

Puedes explorar archivos y carpetas del repositorio.
Hacer cambios en los archivos como en Visual Studio Code.
Compatible con resaltado de sintaxis y autocompletado.

📌 3️⃣ Commit y Gestión de Archivos

Modificar archivos: Edita cualquier archivo en el repositorio.
Hacer un commit:
- Abre el panel de control de Git en la barra lateral izquierda.
- Escribe un mensaje de commit.
- Haz clic en "Commit changes".
Trabajar en ramas: Puedes cambiar de rama o crear una nueva desde el editor.

🔄 4️⃣ Diferencias entre GitHub.dev y Codespaces

CaracterísticaGitHub.devGitHub CodespacesEditorBasado en navegador (VS Code)Entorno en la nube completoEjecución de código❌ No permite ejecutar código✅ Sí, permite correr códigoAcceso a terminal❌ No disponible✅ DisponibleUso de extensionesLimitadoCompletoConfiguración avanzada❌ No soporta devcontainer.json✅ Soporta devcontainer.json

¿Cuándo usar GitHub.dev? ✅ Para ediciones rápidas de código. ✅ Cuando no necesitas ejecutar programas. ✅ Si no quieres configurar un entorno local.

🎯 Conclusión

GitHub.dev es una excelente opción para editar código desde el navegador sin instalar herramientas adicionales. Sin embargo, si necesitas ejecutar código o configurar un entorno completo, GitHub Codespaces es la mejor alternativa.

Comentarios (15)15 comentarios

Jose Luis Bedoya

Diego Andrés Lopez Rodriguez

Pablo Herrera

Hace un año

Samuel Steven Bernal Martínez

Jhon Freddy Tavera Blandon

Claudia Iliana Padilla Magaña

Hace 6 meses

Dussan Freire

Hace 10 meses

Diego Mauricio Zuluaga Rodríguez

José Lancheros Ayora

José Luis Mendez Marcano

Hace 4 meses

Giovanni Rincón Quintero

Hace 3 meses

Gabriel Obregón

SANTIAGO ALBERTO BOLIVAR CARDENAS.

Daniel Alexander Rentería Pino

Donovan Villanueva

Fundamentos de Git y control de versiones

Control de Versiones con Git y GitHub: De Básico a Avanzado

Fundamentos de Git: Configuración y Comandos Básicos

Control de Versiones con Git: Comandos Básicos y Flujo de Trabajo

Gestión de ramas en Git: creación, fusión y eliminación eficiente

Git reset vs revert para deshacer commits

Git Tag y Checkout sin romper tu proyecto

Cómo resolver conflictos de merge en Git

Uso de Git en Visual Studio Code

Introducción a GitHub

Uso de GitHub para Colaboración y Desarrollo Seguro

Cómo crear y proteger tu cuenta de GitHub

Proceso de Trabajo con Git y GitHub: Creación y Revisión de Repositorios

Crea y clona tu primer repo en GitHub

Precios y Planes de Productos de Github

Configuración de SSH en GitHub para Windows, Linux y Mac

Uso de Forks y Estrellas en Repositorios de GitHub

Uso de git pull, git push y git fetch en repositorios GitHub

Plantillas de issues en GitHub paso a paso

Uso de Pull Requests en GitHub para Colaboración Efectiva

Herramientas de colaboración en GitHub

GitHub Projects para gestionar tareas en equipo

Automatiza GitHub Projects con workflows

Recursos Esenciales de Markdown para Documentación Efectiva

Creación de una Portada de Perfil en GitHub con Markdown

Creación y Gestión de Wikis en GitHub

Uso de GitHub Gist para Compartir y Revisar Código Colaborativo

Creación y Publicación de Sitios Web con GitHub Pages

GitHub Codespaces

Creación y Gestión de GitHub Codespaces en la Nube

Plantillas de Codespaces con Django y devcontainer

Pair programming con Live Share en Codespaces

Uso del Editor Web de GitHub para Edición Rápida de Archivos

Seguridad y buenas prácticas en GitHub

Gestión de GitHub Tokens para Acceso Seguro a Repositorios

Secret Scanning en GitHub y sus límites

Gestión de Seguridad de Paquetes con Dependabot en Proyectos .NET

Repositorios privados y .gitignore en GitHub

Administración de GitHub

Creación y gestión de repositorios en GitHub

Automatización de GitHub Actions para Actualizar Perfil

Gestiona GitHub desde tu terminal con gh

Gestión de Cambios con Pull Requests

Configuración de Proyectos de Software con Git y GitHub

Cómo resolver conflictos de merge en VS Code

Estrategias de Fusión de Ramas en Git

GitHub Releases

Creación de Releases en Github para Desarrolladores de Software

Instala tu paquete pip desde GitHub

Cierre

Pro tips ocultos de GitHub para trabajar mejor

Uso del Editor Web de GitHub para Edición Rápida de Archivos