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

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é pasa con solo probar los fragmentos de código? ¡Ahora hay más herramientas disponibles que nunca!

En este artículo quiero esbozar 10 aplicaciones web interesantes para probar tu 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 para depurar un bloque de JavaScript o PHP.

Los 10 mejores editores de código fuente gratuitos: revisados

Los 10 mejores editores de código fuente gratuitos: revisados

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

Teclado

IDE en línea de teclado en el navegador

Originalmente creado por Steven Hazel, Teclado es una aplicación web única donde puede compartir la sintaxis de código en la Web. En lugar de solo depurar, Codepad le permite copiar / pegar partes 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 opción del menú de la izquierda le permiten cambiar el lenguaje de análisis de C / C ++, Perl, PHP, Python, Ruby y mucho más. Yo diría que Codepad es realmente para ingenieros de software que necesitan colaborar y depurar sus programas más confusos.

JSBin

Captura de pantalla del código del sitio web jsBin

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

Su interfaz puede ser 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.

Tutoriales en línea JavaScript de edición de código JSBin

A medida que codifica diferentes elementos, los borradores se guardarán automáticamente. Tiene la capacidad 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 desnuda.

jsFiddle

jsFiddle codificación HTML5 y JavaScript

Cualquiera que haya navegado por Stack Overflow debe saber sobre jsFiddle. Su interfaz es una gran diferencia en comparación con JSBin, junto con el soporte para funciones más complejas.

Inmediatamente puede registrarse para obtener una cuenta gratuita y comenzar a guardar sus muestras 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 característica ú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. Increíblemente, su aplicación incluso es compatible con XHR Ajax, donde puede pasar datos de un lado a otro entre el servidor y la ventana del navegador del cliente.

CodePen

Página de inicio del sitio web de CodePen

CodePen es más como una red social para desarrolladores web que como un código de juegos. No solo podemos ver a las personas compartir códigos en HTML, CSS y JavaScript, lo que se llama un bolígrafo, sino que también podemos darle un "Me gusta" al bolígrafo, agregar comentarios, seleccionar una colección de bolígrafos, crear una publicación y siga el desafío para subir de nivel nuestra habilidad de desarrollo web.

CodeSandbox

Interfaz de patio de juegos de Códigos y caja con tema oscuro

Códigos y caja es un campo de juegos 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 de package.json archivo. Codesandbox descargará automáticamente las dependencias de NPM. También proporciona acceso a un terminal basado en web para que pueda ejecutar cualquier script NPM directamente desde el navegador.

Vea la página Explorar para encontrar cosas interesantes creadas en CodeSandbox.

WebMaker

Interfaz de la aplicación Web Maker

WebMaker es un código de juegos para HTML, CSS, JavaScript, así como preprocesadores como Sass, LESS y JSX. WebMaker compilará automáticamente la sintaxis de estos preprocesadores para que el navegador represente el código correctamente. Puede usarlo en el navegador o instalar la extensión en Chrome para poder 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 compartirlo 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 la página web final renderizada a la derecha. Esta aplicación web es ideal para crear pequeñas plantillas de página web 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. Luego, otros desarrolladores pueden entrar y editar lo que ya ha creado, ¡definitivamente una solución interesante!

IDEOne

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

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

Lo bueno de su aplicación es cómo puede 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 de iPhone.

JSLint

Consola de depuración de código JavaScript JSLint

La autoproclamada herramienta de calidad de código JavaScript 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 sean muy confusas si no ha utilizado su marco antes. Es posible trabajar con código fuente abierto como Node.js si tiene el conjunto de habilidades. 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 puede que no se convierta en su depurador de JavaScript en línea.

Violín de SQL

SQL Fiddle que codifica IDE en línea de MySQL y MSSQL

Vimos anteriormente el poder de una aplicación web como jsFiddle. Ahora podemos ver Violín de 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 un 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 genial! Vea uno de sus ejemplos de código básico para que pueda tener una idea de cómo funciona la aplicación.

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 las 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 cuestión de minutos tener una pequeña vista previa de demostración. Recuerde que estas son solo herramientas para ayudarlo a guiarlo en el camino hacia la construcción de su producto final. Si tiene alguna sugerencia o pregunta sobre el artículo, siéntase libre de compartir sus pensamientos en el área de discusión a continuación.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *