Saltar al contenido

10 sitios web para probar sus códigos en línea

jsBin website code screenshot

Las tendencias modernas y las aplicaciones web han cambiado drásticamente la forma en que los desarrolladores web pueden construir. Obviamente, necesita algún tipo de IDE para codificar nuevos archivos y guardarlos para su implementación. Pero, ¿qué hay de probar sus fragmentos de código? ¡Hay más herramientas disponibles ahora que nunca!

En este artículo quiero resumir 10 aplicaciones web interesantes para probar su código en línea. Todas estas aplicaciones requieren una conexión a Internet y algunos de los editores más avanzados ofrecen planes profesionales para actualizar las funciones de su cuenta. Pero la mayoría de estas herramientas seguramente serán útiles cuando esté luchando por depurar un bloque de JavaScript o PHP.

10 mejores editores de código fuente gratuitos

10 mejores editores de código fuente gratuitos

Con un editor de código profesional como Dreamweaver, Coda, Textmate y otros, no es de extrañar que cada vez más personas … Lee mas

JSBin

Captura de pantalla del código del sitio web jsBin

De manera similar a la anterior, jsbin es una sencilla consola de depuración de JavaScript. Su presentación implica un esfuerzo de colaboración en el que puede compartir un enlace privado con otros desarrolladores y escribir juntos en tiempo real.

Su interfaz puede resultar un poco confusa para los recién llegados. Los desarrolladores han configurado algunos tutoriales en línea que puede leer si está interesado. Básicamente, puede seleccionar entre cualquier cantidad de bibliotecas JS: jQuery, JQuery UI, jQM, Prototype, MooTools, hay docenas para elegir.

A medida que codifica diferentes elementos, los borradores se guardarán automáticamente. Tiene la posibilidad de descargar su producto final o mantener el código fuente guardado en línea. Su sistema es mucho más avanzado para exportar y mantener su código como una plantilla simple.

jsFiddle

jsFiddle codificación HTML5 y JavaScript

Cualquiera que haya navegado a través de Stack Overflow debe conocer jsFiddle. Su interfaz es una gran diferencia en comparación con JSBin, junto con el soporte para funciones más complejas.

De inmediato, puede registrarse para obtener una cuenta gratuita y comenzar a guardar sus ejemplos de código en línea. jsFiddle ofrece una URL corta que puede compartir en la Web a través de Twitter, Facebook e incluso Stack. Pero tenga en cuenta que no necesita una cuenta para comenzar a codificar. Es solo una función útil para mantener todo organizado.

jsFiddle también admite la inclusión de bibliotecas como Prototype y jQuery. Puede incluir recursos externos adicionales a los archivos JS / CSS en cada documento de prueba.

CodePen

Página de inicio del sitio web de CodePen

CodePen se parece más a una red social para desarrolladores web que a un campo de juegos de código. No solo podemos ver que las personas comparten códigos en HTML, CSS y JavaScript, lo que se llama un lápiz, sino que también podemos dar un «Me gusta» al lápiz, agregar comentarios, seleccionar una colección de lápices, crear una publicación y siga el desafío para subir de nivel nuestra habilidad de desarrollo web.

Código Caja de arena

Interfaz de juegos de Codesandbox con tema oscuro

Códigos y caja es un campo de juegos de JavaScript con todas las funciones. Además de ejecutar un código JavaScript de Vanilla o un marco como React.js, Vue.js y Svelte, también puede ejecutar una aplicación Node.js que funcione. Significa que puede definir las dependencias de Node.js dentro del archivo package.json. Codesandbox descargará automáticamente las dependencias de NPM. También proporciona acceso a una Terminal basada en web para que pueda ejecutar cualquier script de NPM directamente desde el navegador.

Consulte la página Explorar para encontrar cosas interesantes integradas en CodeSandbox.

WebMaker

Interfaz de la aplicación Web Maker

WebMaker es un campo de juegos de código para HTML, CSS, JavaScript, así como para preprocesadores como Sass, LESS y JSX. WebMaker compilará automáticamente la sintaxis de estos preprocesadores para que el navegador represente el código correctamente. Puedes usarlo en el navegador o instalar la extensión en Chrome para que puedas seguir jugando con el código sin conexión. Cuando haya terminado de experimentar con su código, le permite guardar su trabajo localmente, descargar los archivos o compartirlos en CodePen.

CSSDesk

Codificación CSS3 en la aplicación web CSSDesk

Pasando del mundo de las secuencias de comandos al lenguaje de hojas de estilo, tenemos CSSDesk. Tiene una configuración similar a todas las demás, con su código fuente a la izquierda y el renderizado final de la página web a la derecha. Esta aplicación web es ideal para crear plantillas de páginas web pequeñas y probar las propiedades CSS3 más largas con degradados y sombras de cuadro.

Esta aplicación también le permite descargar el código fuente como archivos a su computadora. Puede ser un reemplazo sólido en situaciones en las que está trabajando en una computadora portátil sin ningún software IDE. O, además, puede generar un enlace URL corto para compartir en línea. Entonces, otros desarrolladores pueden entrar y editar lo que ya ha creado, ¡definitivamente una solución interesante!

IDEOne

Resaltado y depuración de código del editor en línea del sitio web IDEOne

IDE uno es otra herramienta basada en la programación profunda y el desarrollo de software. Su editor en línea admite el resaltado de sintaxis para algunos idiomas muy destacados. Estos incluyen Objective-C, Java, C #, VB.NET, SQL y muchos más.

Lo bueno de su aplicación es que puedes depurar rápidamente muchos lenguajes de programación diferentes desde la misma página. También puede almacenar este código fuente a través de una URL única para compartir en la Web. Sin embargo, creo que su diseño está muy abarrotado de anuncios y otro contenido, lo que dificulta el uso de su sitio web. Sería genial ver la opción de incluir bibliotecas de código alternativas, como Cocoa Touch para el desarrollo de aplicaciones para iPhone.

JSLint

Consola de depuración de código JavaScript JSLint

La herramienta de calidad de código JavaScript autoproclamada debe ser JSLint. Su sitio web es un poco extraño, pero el editor de código funciona exactamente como cabría esperar.

Es posible que las opciones le resulten muy confusas si no ha utilizado su marco antes. Es posible trabajar con código fuente abierto como Node.js si tiene las habilidades necesarias. Pero gran parte del código fuente ni siquiera admite el resaltado de sintaxis, una gran decepción cuando tiene tantas otras opciones para elegir. Verificaría JSLint si tiene tiempo, pero es posible que no se convierta en su depurador de JavaScript en línea.

Violín SQL

SQL Fiddle codificación MySQL y MSSQL IDE en línea

Vimos anteriormente el poder de una aplicación web como jsFiddle. Ahora podemos ver Violín SQL que funciona de la misma manera, excepto por la sintaxis de la base de datos SQL. Todavía tengo que encontrar otra alternativa para probar el código de la base de datos y esta es, con mucho, mi opción favorita.

Todos los datos de salida de su código SQL aparecerán en una tabla debajo de los editores. Puede escribir código para implementar nuevos datos a la derecha y generar un esquema a la izquierda. Este esquema de base de datos es un código SQL que puede guardar para exportar su base de datos actual y reinstalar todo en un nuevo servidor.

Si no está familiarizado con las bases de datos o el lenguaje SQL, esta aplicación no será de mucha ayuda. Pero incluso para los desarrolladores que son nuevos pero están interesados ​​en aprender SQL, ¡esto es brillante! Echa un vistazo a uno de sus ejemplos de código básico para que puedas hacerte una idea de cómo funciona la aplicación.

Demostración de ESLint

Demostración de ESLint

ESLint le permite establecer reglas de escritura en su código. Es una gran herramienta si trabaja en un proyecto compartido dentro de un equipo para asegurarse de que todos sigan los mismos estilos y reglas al escribir los códigos. Proporciona una gran cantidad de opciones sobre cómo gobernaría los estilos de sus códigos, lo que a menudo es bastante intimidante, especialmente si acaba de comenzar con ESLint.

Este sitio de demostración en línea de ESLint puede ayudarlo a probar cómo funciona cada regla en su código incluso antes de instalar los paquetes de NPM. Proporciona la lista completa de reglas que puede activar y desactivar. Cuando esté todo listo, puede descargar el archivo de configuración para agregarlo a su proyecto.

PHPStan

PHPStan

PHPStan es una herramienta de análisis de código estático para PHP. Comprueba si hay errores de código y errores potenciales sin ejecutar realmente el código. Le dirá si pasa, por ejemplo, un valor de cadena a una función que realmente acepta un número entero, o accede a una propiedad que no existe en una clase.

Pruebe el editor en línea en este sitio web de PHPStan para ver cómo funciona. Se sorprenderá de que hay tantos códigos PHP existentes que se pueden optimizar aún más y corregir posibles errores. Tener análisis estático también puede capacitarlo para convertirse en un mejor desarrollador, ya que estará acostumbrado a escribir código sintácticamente correcto.

OneCompiler

OneCompiler

Un compilador todo en uno para muchos lenguajes de programación. Admite más de 40 idiomas que incluyen Go, PHP, Java, JavaScript e incluso C y C ++. Puede escribir estos lenguajes dentro de estas herramientas y compilará y ejecutará el código inmediatamente. Esta herramienta es una herramienta perfecta para probar su código rápidamente para una demostración, o simplemente para ejecutar una prueba rápida.

Además del ejecutor de código, esta herramienta también ofrece desafíos de código para agudizar sus habilidades de programación y resolución de problemas. Puede comenzar el desafío desde los principiantes hasta el nivel más avanzado.

Jsitor

Jsitor

Un editor de código en línea donde puede ejecutar JavaScript, HTML y CSS. Incluye algunas bibliotecas populares, así como jQuery, React.js, Vue.js, Font Awesome y muchas más. Es una gran herramienta para probar su idea sin tener que configurar un entorno de trabajo en su computadora. También puede usarlo para ejecutar una demostración rápida.

Una cosa que la hace única de otras herramientas similares es que proporciona una aplicación nativa en iOS y Android. Esto le permite verter su idea cómodamente con su tableta y teléfono.

Falla

Falla

Una herramienta en la que puede crear un sitio web estático con algunas de las bibliotecas y marcos modernos. Incluye React.js, Node.js y Eleventy.js. Pero también puede escribir HTML, CSS y JavaScript.

Además del editor en línea donde escribe sus códigos, Glitch también proporciona varias herramientas avanzadas que lo convierten en un excelente entorno de trabajo en línea para crear sitios web estáticos. Tiene una Terminal en línea donde puede escribir comandos, ver registros y un depurador de navegador.

Una vez que tenga el sitio web listo, puede descargar los archivos o compartir la URL única del proyecto.

Stackblitz

Stackblitz

Stackblitz es un entorno de desarrollo en línea donde puede crear sitios web con pilas modernas. Es compatible con el marco de backend Next.js y Node.js, junto con algunas bibliotecas de front-end populares como React.js, Vue.js y Angular.

Puede seleccionar uno de estos marcos como punto de partida para su proyecto o simplemente arrastrar y soltar una carpeta en él. Está preconfigurado con herramientas que normalmente necesita configurar por su cuenta cuando trabaja localmente en su computadora, como la actualización automática, la instalación de dependencias y Prettier.

Además de eso, también puede conectar su sitio web Firebase, en caso de que necesite conectarse a una base de datos en tiempo real.

Teclado

IDE de teclado en línea en el navegador

(El teclado ha sido descontinuado).

Creado originalmente por Steven Hazel, Teclado es una aplicación web única en la que puede compartir la sintaxis de código en la web. En lugar de solo depurar, Codepad le permite copiar / pegar fragmentos importantes de código para compartir en línea.

La pantalla de salida muestra cualquier mensaje de error asociado con su código. Los botones de radio del menú de la izquierda le permiten cambiar el lenguaje de análisis de C / C ++, Perl, PHP, Python, Ruby y muchos más. Yo diría que Codepad es realmente para ingenieros de software que necesitan colaborar y depurar sus programas más confusos.

Pensamientos finales

Con más computadoras conectadas en línea, es más fácil para los desarrolladores trabajar juntos y colaborar en el navegador. Estamos viendo que más y más tecnologías cambian de aplicaciones locales, y ¿quién sabe hasta dónde llegará esta tendencia?

Espero que esta colección de herramientas de prueba de código pueda hacerle pensar en el entorno de desarrollo moderno. Es muy fácil armar rápidamente un proyecto web HTML / CSS y en minutos tener una pequeña vista previa de demostración. Recuerde que estas son solo herramientas que lo ayudarán a guiarlo en el camino hacia la construcción de su producto final. Si tiene alguna sugerencia o pregunta sobre el artículo, no dude en compartir sus pensamientos en el área de discusión a continuación.