diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 21:46:22 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 21:46:22 -0500 |
commit | a065e04d529da1d847b5062a12c46d916408bf32 (patch) | |
tree | fe0f8bcec1ff39a3c499a2708222dcf15224ff70 /files/es/tools | |
parent | 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 (diff) | |
download | translated-content-a065e04d529da1d847b5062a12c46d916408bf32.tar.gz translated-content-a065e04d529da1d847b5062a12c46d916408bf32.tar.bz2 translated-content-a065e04d529da1d847b5062a12c46d916408bf32.zip |
update based on https://github.com/mdn/yari/issues/2028
Diffstat (limited to 'files/es/tools')
-rw-r--r-- | files/es/tools/webide/index.html | 298 | ||||
-rw-r--r-- | files/es/tools/webide/monitor/index.html | 158 | ||||
-rw-r--r-- | files/es/tools/webide/troubleshooting/index.html | 50 |
3 files changed, 0 insertions, 506 deletions
diff --git a/files/es/tools/webide/index.html b/files/es/tools/webide/index.html deleted file mode 100644 index e2a8c54122..0000000000 --- a/files/es/tools/webide/index.html +++ /dev/null @@ -1,298 +0,0 @@ ---- -title: WebIDE -slug: Tools/WebIDE -translation_of: Archive/WebIDE ---- -<div class="geckoVersionNote"> -<p>WebIDE está disponible desde Firefox 34 en adelante.</p> - -<p>También puede habilitarlo en Firefox 33, modificando una opción: Visite <a href="http://kb.mozillazine.org/About:config">about:config</a>, encuentre la opción llamada <code>devtools.webide.enabled</code> y cambie su valor a <code>true</code>.</p> -</div> - -<div class="summary"> -<p>WebIDE es el sustituto de <a href="/es/Firefox_OS/Using_the_App_Manager">App Manager</a>. Al igual que App Manager, este permite ejecutar y depurar aplicaciones <a href="/es/Firefox_OS">Firefox OS</a> utilizando el <a href="/es/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a> o un dispositivo Firefox OS real.</p> - -<p>Además, proporciona un entorno de edición para crear y desarrollar aplicaciones para FireFox OS, incluye una vista de árbol jerárquica de todos los archivos de la aplicación con la posibilidad de editarlos y grabar los cambios realizados, y también dos plantillas de aplicación para ayudar a comenzar a desarrollar.</p> - -<p>Por último, WebIDE le permite conectarse a <a href="https://developer.mozilla.org/en-US/docs/Tools">Firefox Developer Tools</a> (Herramientas de Desarrollo Firefox) a otros navegadores, incluyendo Firefox para Android, Chrome para Android, y Safari para iOS. Vea la página de<a href="/es/docs/Tools/Remote_Debugging"> </a><a href="https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging">Remote Debugging</a> (Depuración Remota) para instrucciones de como conectar con un navegador específico.</p> -</div> - -<p>Con WebIDE, primero <a href="/es/docs/Tools/WebIDE#Setting_up_runtimes">configura uno o varios <em>runtimes</em></a>. Un <em>runtime </em>es un entorno en el que podrás ejecutar y depurar la aplicación. Un <em>runtime</em> podría ser un dispositivo Firefox OS conectado al escritorio a través de USB, o podría ser un Simulador de Firefox OS instalado en el propio escritorio.</p> - -<p>Luego, <a href="/es/docs/Tools/WebIDE#Creating_and_opening_apps">cree una aplicación, o abra una aplicación existente</a>. Si está creando una nueva aplicación, empiece con una plantilla que incluya la estructura y el contenido mínimo que necesita para empezar, o una plantilla más completa que muestre cómo utilizar una API privilegiada. WebIDE muestra los archivos de su aplicación en un árbol, que se pueden editar y guardar usando su editor de código incorporado. Por supuesto, usted no tiene que utilizar el editor integrado: puede desarrollar su aplicación completamente fuera del WebIDE, y sólo utilizarlo para la depuración.</p> - -<p>Finalmente, puede <a href="/es/docs/Tools/WebIDE#Running_and_debugging_apps">instalar la aplicción en uno de los <em>runtimes</em> y ejecutarla</a>. Usted puede abrir la suite de herramientas para desarrolladores - el <a href="/es/docs/Tools/Page_Inspector">Inspector</a>, la <a href="/es/docs/Tools/Web_Console">Consola</a>, el <a href="/es/docs/Tools/Debugger">JavaScript Debugger</a> (Depurador de JavaScript), etc. - para examinar y modificar la aplicación en ejecución.</p> - -<h2 id="Requisitos_del_Sistema">Requisitos del Sistema</h2> - -<p>Para desarrollar y depurar aplicaciones utilizando la WebIDE, todo lo que necesita es Firefox versión 33 o posterior. Para hacer pruebas en un dispositivo de Firefox OS real, necesita un dispositivo que ejecute Firefox OS 1.2 o posterior, y un cable USB.<br> - <br> - Sólo se puede utilizar el WebIDE si usted está pensando en Firefox OS 1.2 o posterior.</p> - -<h2 id="Ejecutando_WebIDE">Ejecutando WebIDE</h2> - -<p>Hay tres maneras de abrir WebIDE:</p> - -<ul> - <li>En el menú Web Developer (Desarrollador Web), haga clic en "WebIDE" y éste se abrirá.</li> - <li>Use la combinación de teclas Shift-F8.</li> - <li>Un ícono para tales efectos está disponible en la Barra de Herramientas de Firefox. Este siembre es visible si se está usando <a href="/es/Firefox/Developer_Edition">Firefox Developer Edition</a> (Firefox Edición Desarrollador), y con cualquier Firefox versión 36 o superior aparece después de que haya abierto el WebIDE al menos una vez:</li> -</ul> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9437/webide-icon.png" style="display: block; margin-left: auto; margin-right: auto; width: 897px;"></p> - -<p>Así es como luce WebIDE:<img alt="" src="https://mdn.mozillademos.org/files/8033/webide-initial.png" style="display: block; height: 560px; margin-left: auto; margin-right: auto; width: 720px;">El menú desplegable de la izquierda con la etiqueta "Abrir aplicación" (Open App) le permite abrir aplicaciones existentes o crear otras nuevas. El menú desplegable de la derecha con la etiqueta "Seleccionar <em>Runtime</em>" (Select Runtime) le permite seleccionar un <em>runtime</em> o configurar uno nuevo.<br> - <br> - Los botones en el medio ejecutan, detienen, y depuran la aplicación: sólo se activan cuando se ha abierto una aplicación y se selecciona un <em>runtime</em>.</p> - -<p>Desde Firefox versión 36, puede cambiar el tamaño de la fuente de todo el WebIDE usando los atajos de teclado estándares (Use <code>Command</code> en vez de <code>Control</code> en OS X):</p> - -<ul> - <li><code>Ctrl +</code> aumenta el tamaño de la fuente</li> - <li><code>Ctrl -</code> disminuye el tamaño de la fuente</li> - <li><code>Ctrl 0</code> vuelte el tamaño de la fuente al valor por defecto</li> -</ul> - -<h2 id="Configurando_runtimes">Configurando <em>runtimes</em></h2> - -<p>En el el menú desplegable "Seleccione <em>Runtime</em>", los <em>rumtimes</em> se agrupan en tres tipos:</p> - -<ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Connecting_a_Firefox_OS_device">Dispositivos USB</a>: Dispositivos con sistema operativo Firefox conectados a través de USB.</li> - <li><a href="/en-US/docs/Tools/WebIDE#Adding_a_Simulator">Simuladores</a>: instancias del simulador Firefox OS que ha instalado.</li> - <li><a href="/en-US/docs/Tools/WebIDE#Custom_runtimes">Personalizado</a>: úselo para conectarse a la WebIDE utilizando un nombre arbitrario y el puerto.</li> -</ul> - -<p>La primera vez que hace clic en el menú desplegable, es posible que no vea los <em>runtimes</em> aquí:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8043/webide-no-runtimes.png" style="display: block; height: 564px; margin-left: auto; margin-right: auto; width: 723px;">El resto de esta sección describe cómo se pueden agregar algunos <em>runtimes</em>.</p> - -<h3 id="Conectando_un_dispositivo_Firefox_OS">Conectando un dispositivo Firefox OS</h3> - -<p>Antes de conectar un dispositivo Firefox OS, algunas configuraciones que debes revisar:</p> - -<ul> - <li><strong>revisar la versión Firefox OS: </strong>asegurar que tu dispositivo tiene Firefox OS 1.2/Boot2Gecko 1.2 o superior. Para revisar la versión, ir a configuracion de app del dispositivo, luego <code>Device Information > Software</code>. Si no tiene la última actualización, busca tu dispositivo en <a href="/en-US/Firefox_OS/Developer_phone_guide">guia del desarrollador</a> y sigue las instrucciones de actualizacion.</li> - <li><strong>habilitar depuracion remota: </strong>en la configuracion de app del dispositivo, ir a <code>Device information > More information > Developer</code>. - <ul> - </ul> - - <ul> - <li>Firefox OS 1.3 y anteriores: "Depuración Remota" es una simple casilla. Confirmalo.</li> - <li>Firefox OS 1.4 y superiores: "Depuración Remota" le pedirá habilitar ADB, o ADB y DevTools. Seleccionar "ADB y DevTools".</li> - </ul> - </li> - <li><strong>deshabilitar el bloqueo de pantalla en el dispositivo:</strong> en la configuracion de app del dispositivo, vaya a <code>Screen Lock</code> y desmarcar el <code>Lock Screen</code> checkbox. es una buena idea porque cuando la pantalla se bloquea, la conexion del teléfono se pierde, esto significa que no esta disponible para depuración.</li> - <li><strong>si tu quieres depurar aplicaciones, incluyendo aplicaciones presintaladas</strong>: revisar la sección <a href="/en-US/docs/Tools/WebIDE#Debugging_certified_apps">depurando apps certificadas </a>.</li> -</ul> - -<div class="note"> -<p><strong>Solo Linux :</strong></p> - -<ul> - <li>agregar archivo de reglas <code>udev</code> , asi como el paso 3 documentado en <a href="http://developer.android.com/tools/device.html#setting-up">configurando un dispositivo Android</a>. El atributo <code>idVendor</code> a utilizar para Geeksphone es"05c6", y <a href="http://developer.android.com/tools/device.html#VendorIds">esta pagina</a> despliega otros valores de <code>idVendor</code>.</li> -</ul> -</div> - -<div class="note"> -<p><strong>Solo Windows:</strong></p> - -<ul> - <li>necesitas instalar drivers, como se documenta en el paso 3 de <a href="http://developer.android.com/tools/device.html#setting-up">configurar un dispositivo Android</a>. Tú puedes encontrar drivers para dispositivos Geeksphone en <a href="http://downloads.geeksphone.com/">sitio web de Geeksphone </a>. Windows 8 por defecto no permite instalar drivers no firmados. Ver el siguiente tutorial en <a class="external external-icon" href="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html" title="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html">"Como instalar driver no firmados en Windows 8"</a>.</li> - <li>si el WebIDE no visualiza tu dispositivo después de seguir los pasos, puede que tengas que editar <a class="external external-icon" href="http://blog.fh-kaernten.at/wehr/?p=1182">edit adb_usb.ini</a>.</li> -</ul> -</div> - -<p>Si existe otro dispositivo Android conectado a tu ordenador, desconectelo(s). Ahora conecta el dispositivo al ordenador mediante el USB. Tu podrás ver que tu dispositivo aparecer bajo "USB DEVICES":</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8045/webide-select-runtime-keon.png" style="display: block; height: 562px; margin-left: auto; margin-right: auto; width: 710px;"></p> - -<p>Si no visualizas el dispositivo, dirigete a la página <a href="/en-US/docs/Tools/WebIDE/Troubleshooting">Solucionador de problemas</a>.</p> - -<h3 id="Añadiendo_un_Simulador">Añadiendo un Simulador</h3> - -<p><span style="line-height: 1.5;"><a href="/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a> es una versión de altas capas de <span style="line-height: 1.5;">Firefox OS</span> que simula un dispositivo Firefox OS, pero se ejecuta runs en el escritorio</span><span style="line-height: 1.5;">. Corre en una ventana del mismo tamaño de un dispositivo</span><span style="line-height: 1.5;"> Firefox OS, incluye la interface de usuario Firefox OS, una terminal de construcción built-in apps, y simula varios APIs para dispositivos Firefox OS.</span></p> - -<p>Esto significa que en muchos casos, no necesitas un dispositivo real para probar y depurar su app.<span style="line-height: 1.5;"> </span></p> - -<p>El Simulator es grande, tanto que no se desplaza al interior de Firefox sino como un Firefox <a href="/en-US/Add-ons">add-on</a>. Si oprime "Install Simulator" en el menú Runtimes dropdown, irá a la página desde la cual puede instalar Simuladores para varias versiones de Firefox OS.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8039/webide-install-simulator.png" style="display: block; height: 560px; margin-left: auto; margin-right: auto; width: 720px;">Lo puede instalar tantas veces como quieras. Sea paciente: el Simulador es grande y puede llevar unos minutos para descargarlo. Una vez ha instalado algunos Simuladores, puede cerrar la ventana de "Componentes Extra", y los simuladores que ha instalado aparecerán como opciones en el menú desplegable del <em>runtime</em>.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8047/webide-select-runtime-keon-simulator.png" style="display: block; height: 559px; margin-left: auto; margin-right: auto; width: 712px;">Para aprender más sobre el Simulador, mire <a href="/en-US/docs/Tools/Firefox_OS_Simulator">su página</a> de documentación.</p> - -<h3 id="Runtimes_personalizados"><em>Runtimes</em> personalizados</h3> - -<p>Con un <em>runtime </em>personalizado puede usar on nombre de host un un puerto arbitrario para conectarte a un dispositivo remoto.</p> - -<p>Bajo el capó, los dispositivos con el SO Firefox y Android se conectan al escritorio llamado <em>Android Debug Bridge</em> (Puente de Depuración Android), o <a href="http://developer.android.com/tools/help/adb.html">ADB</a>. Por defecto, el WebIDE usa un complemento llamado <em>ADB Helper</em>: esto simplifica el proceso para usted, puesto que instala el ADB y configura un puerto para que el escritorio de herramientas de Firefox pueda intercambiar mensajes con el dispositivo.</p> - -<p>Esto es conveniente en la mayoría de casos, pero a veces querrá usar el ADB fuera del WebIDE: por ejemplo, podría estar usando el ADB directamente desde línea de comandos. En ese caso, se conectará al dispositivo especificando un host y puerto, usando el comando <a href="http://developer.android.com/tools/help/adb.html#forwardports"><code>adb forward</code></a>.</p> - -<p>Si, entonces, quiere conectar el WebIDE también, debería <a href="https://support.mozilla.org/en-US/kb/disable-or-remove-add-ons#w_how-to-disable-extensions-and-themes">desactivar el complemento ADB Helper</a> y conectar el WebIDE usando la opción de <em>Runtime</em> personalizado, introduciendo el host y puerto que has pasqdo a <code>adb forward</code>.</p> - -<p>Tampoco, ADB Helper permite aún conectar a Firefox para Android, así si quiere conectar WebIDE a Firefox para Android, necesitará establecer su propio puerto forwarding y usar la custom runtime. <a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android">Ver más sobre conexión a Firefox para Android usando ADB</a>.</p> - -<h2 id="Seleccionando_un_runtime">Seleccionando un <em>runtime</em></h2> - -<p>Una vez haya configurado un <em>runtime</em>, puede seleccionarlo usando el menú <em>"Select Runtime"</em> (Seleccionar <em>runtime</em>).</p> - -<ul> - <li>Si selecciona un Simulador, el WebIDE inicia el Simulador.</li> - <li>Si selecciona un dispositivo con SO Firefox, el WebIDE se conecta al dispositivo. En el dispositivo, un diálogo le preguntará si confirma la conexión: presione "OK".</li> -</ul> - -<p>Ahora el botón <em>"play"</em> en el centro de la barra de herramientas del WebIDE está habilitado: clícalo para instalar y ejecutar la app en el <em>runtime </em>seleccionado.</p> - -<h3 id="Acciones_de_los_runtime">Acciones de los <em>runtime</em></h3> - -<p>Cuando un <em>runtime</em> es seleccionado, el menú desplegable de Runtimes tendrá tres objetos extras:</p> - -<ul> - <li><strong>Información del Runtime</strong>: información del runtime actual.</li> - <li><strong>Tabla de permisos</strong>: una tabla ordenando <a href="/en-US/Apps/Build/App_permissions">permisos de la app</a> para el runtime utilizado, indicando, para cada API y <a href="/en-US/Marketplace/Options/Packaged_apps#Types_of_packaged_apps">tipo de app</a>, si el acceso está permitido (✓), denegado (✗), o si se le pide al usuario (!).</li> - <li><strong>Captura de pantalla</strong>: un comando para sacar captura de pantalla desde el <em>runtime</em>.</li> -</ul> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8147/webide-runtimes-menu.png" style="display: block; height: 596px; margin-left: auto; margin-right: auto; width: 789px;"></p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8145/webide-runtimeinfo.png" style="display: block; height: 593px; margin-left: auto; margin-right: auto; width: 753px;"><img alt="" src="https://mdn.mozillademos.org/files/8149/webide-permissions.png" style="display: block; height: 593px; margin-left: auto; margin-right: auto; width: 753px;"></p> - -<h2 id="Creando_y_abriendo_apps">Creando y abriendo apps</h2> - -<p>En el menú "Open App" (Abrir App) tiene tres opciones: crear una nueva app, abrir una app empaquetada y abrir una app como anfitrión.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8049/webide-open-app-empty.png" style="display: block; height: 562px; margin-left: auto; margin-right: auto; width: 723px;"></p> - -<h3 id="Crear_una_nueva_app">Crear una nueva app</h3> - -<p>Seleccione "New App..." (Nueva App...) para crear una nueva app. Verá una ventana ofreciéndole dos opciones de plantillas, "App Privilegiada y vacía" y "App Privilegiada".</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8053/webide-new-app.png" style="display: block; height: 591px; margin-left: auto; margin-right: auto; width: 739px;"></p> - -<p>Ambas plantillas son de la <a href="https://github.com/mozilla/mortar">colección de plantillas para apps</a> de Mozilla, y le proporcionan la estructura básica que necesita para empezar. La "App Privilegiada" muestra cómo una app puede usar permisos para cargar contenido <em>cross-origin</em>.</p> - -<p>Una vez haya seleccionado una plantilla, deberá poner un nombre a la app y seleccionar un directorio para guardar los archivos, y luego la app será abierta en el <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Editing_apps">editor de proyectos</a>.</p> - -<h3 id="Abrir_una_app_empaquetada">Abrir una app empaquetada</h3> - -<p>Seleccione "Open a Packaged App..." (Abrir una app empaquetada) para abrir una <a href="/en-US/Marketplace/Options/Packaged_apps">app empaquetada</a>. Deberá seleccionar un directorio que contenga el <a href="/en-US/Apps/Build/Manifest">manifiesto</a> de la app, y esta se abrirá en el <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Editing_apps">editor de proyecto</a>.</p> - -<h3 id="Abrir_una_app_alojada">Abrir una app alojada</h3> - -<p>Seleccione "Open Hosted App..." (Abrir una app alojada) para abrir una app alojada. Deberá introdducir la URL apuntando al <a href="/en-US/Apps/Build/Manifest">manifiesto</a> de la app, y esta se abrirá en el <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Editing_apps">editor de proyecto</a></p> - -<h2 id="Editando_apps">Editando apps</h2> - -<p>El editor de proyecto proporciona un entorno para edición de apps. Hay una visión en arbol a la izquierda con todos los archivos en la app: puedes añadir y borrar archivos usando un menú contextual. Hay un panel de editor a la derecha.</p> - -<h3 id="La_página_sumario_de_la_app">La página sumario de la app</h3> - -<p>Cuando por primera vez abra una app, el panel del editor estará ocupado por la página sumario de la app, mostrada debajo:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8055/webide-new-app-editor.png" style="display: block; height: 625px; margin-left: auto; margin-right: auto; width: 846px;"></p> - -<p>Puede volver siempre a la página de sumario de la app clicando en la raíz del árbol en la izquierda.</p> - -<h3 id="Validación_del_manifiesto">Validación del manifiesto</h3> - -<p>WebIDE automáticamente comprueba el manifiesto por algunos problemas comunes. Si encuentra algún problema, indicará que la app es inválida, y describirá el problema en el sumario de la app.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8063/webide-invalid-manifest.png" style="display: block; height: 626px; margin-left: auto; margin-right: auto; width: 847px;"></p> - -<p>Por supuesto, puede editar el archivo <a href="/en-US/Apps/Build/Manifest">manifest.webapp</a> directamente en el editor de proyecto.</p> - -<h3 id="El_editor_fuente">El editor fuente</h3> - -<p>WebIDE usa el editor fuente <a href="http://codemirror.net/">CodeMirror</a>.</p> - -<h4 id="Atajos_de_teclado_del_editor_fuente">Atajos de teclado del editor fuente</h4> - -<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "source-editor") }}</p> - -<h4 id="Autocompletado_de_código">Autocompletado de código</h4> - -<p>Cuando se edite CSS y JavaScript, el editor proporciona sugerencias de autocompletado. El autocompletado en CSS está siempre habilitado:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8057/webide-css-autocomplete.png" style="display: block; height: 628px; margin-left: auto; margin-right: auto; width: 849px;">Para mostrar las sugerencias de autocompletado en JavaScript, pulse Control + Espacio:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8059/webide-js-autocomplete.png" style="display: block; height: 653px; margin-left: auto; margin-right: auto; width: 867px;"></p> - -<h4 id="Documentación_en_línea">Documentación en línea</h4> - -<p>El editor también muestra documentación en línea para JavaScript. Pulsa Shift + Espacio para ver un popup con el contenido de la documentación para el símbolo en el que su cursor está sobrevolando:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8061/webide-js-inline-docs.png" style="display: block; height: 652px; margin-left: auto; margin-right: auto; width: 872px;"></p> - -<p>Clicando el link <code>[docs]</code> en el popup le llevará a la página MDN para el símbolo.</p> - -<h4 id="Guardando_archivos">Guardando archivos</h4> - -<p>Para que los cambios en sus archivos tengan efecto necesitas guardarlos. Los archivos no guardaddos tendrán un asterisco junto a su nombre en la vista de árbol, y podrá guardarlos usando el menú o con Control+S (Command+S en Mac OS X).</p> - -<h3 id="Borrando_proyectos">Borrando proyectos</h3> - -<p>Para borrar una app del WebIDE, vaya a la <a href="/en-US/docs/Tools/WebIDE#The_app_summary_page">págnia de sumario de la app</a> y clique "Remove Project" (Borrar Proyecto).</p> - -<h2 id="Ejecutando_y_depurando_apps">Ejecutando y depurando apps</h2> - -<p>Cuando esté preparado para ejecutar la app, necesitará <a href="/en-US/docs/Tools/WebIDE#Selecting_a_runtime">seleccionar un <em>runtime</em> del menú desplegable "Select Runtime"</a>. Si no tiene ningún runtime disponible, compruebe cómo se añaden algunos runtimes en <a href="/en-US/docs/Tools/WebIDE#Setting_up_runtimes">Configurando <em>runtimes</em></a>.</p> - -<p>El botón "play" en el centro de la bara de herramientas de WebIDE está habilitado ahora: clique para instalar y ejecutar la app en el <em>runtime </em>seleccionado:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8065/webide-running.png" style="display: block; height: 718px; margin-left: auto; margin-right: auto; width: 1314px;">Para depurar la app, da click en el botón de Pausa y las herramientas de la <a href="/en-US/docs/Tools/Tools_Toolbox">Toolbox</a> de Desarrollador aparecerá, conectada a su app:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8067/webide-debugging.png" style="display: block; height: 688px; margin-left: auto; margin-right: auto; width: 1310px;">Exactamente, cuáles tools herramientas tiene disponibles depende del runtime, pero tendrá al menos las básicas: <a href="/en-US/docs/Tools/Page_Inspector">Inspector</a>, <a href="/en-US/docs/Tools/Web_Console">Console</a>, <a href="/en-US/docs/Tools/Debugger">JavaScript Debugger</a>, <a href="/en-US/docs/Tools/Style_Editor">Style Editor</a>, <a href="/en-US/docs/Tools/Profiler">Profiler</a> y <a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a>. Tal como en una página web, algunos cambios que haga con las herramientas son visibles inmediatamente en la app, pero no son permanentes. Al contrario, algunos cambios que haga en el panel de editor pane pueden ser grabados como respaldo definitivo del disco, pero no son visibles sin reiniciar la app.</p> - -<h3 id="Depurando_apps_certificadas">Depurando apps certificadas</h3> - -<p>Con el Simulador, si le das click en el menu desplegable de la aplicación mientras el tiempo de ejecucion esta seleccionado , puedes ver y depurar no solo tu aplicacion, sino todas las que esten corriendo en tiempo de ejecucion, incluidas las <a href="/en-US/Marketplace/Options/Packaged_apps#Certified_app">apps certificadas</a>:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8069/webide-debugging-builtin.png" style="display: block; height: 681px; margin-left: auto; margin-right: auto; width: 1302px;"></p> - -<p><br> - Pero, para depurar certified apps en un dispositivo real:</p> - -<ul> - <li>el dispositivo debe ejecuta un desarrollo construido de Firefox OS 1.2+</li> - <li>usted debe habilitar la depuración de certified app</li> -</ul> - -<p>Para habilitar la depuración certified app, conéctese al proceso runtime, y entonces, en el menú, vaya a <code>Runtime > Runtime Info</code>. Desde allí, si ve <code>"DevTools restricted privileges: yes</code>", esto significa que las certified apps no pueden ser depuradas. La ruta entonces difiere dependiendo de que depuración usted enfreta:</p> - -<ul> - <li>Dispositivo real - <ul> - <li>Si éste puede ser radicado rooted, clicking oprimiendo <code>"request higher privileges"</code> podrá habilitar la depuración de apps certificadas (Firefox OS reiniciará).</li> - </ul> - </li> - <li>Simulador - <ul> - <li>Los simuladores vienen con la depuración de certificadas, habilitada por defecto.</li> - </ul> - </li> - <li>Escritorio B2G - <ul> - <li>Manualmente edite las <a href="https://developer.mozilla.org/en-US/Firefox_OS/Using_the_App_Manager#Using_the_B2G_desktop_client">preferences</a> del cliente de escritorio B2G desktop client antes de conectarse para habilitar la depuración de app certificadas.</li> - </ul> - </li> -</ul> - -<p>Ahora (o después del reinicio de B2G desktop client) en WebIDE podrá ver todas las certified apps del dispositivo.</p> - -<h2 id="Monitoriando_desempeño">Monitoriando desempeño</h2> - -<p>Si le intereza la ejecución de sus apps, hay maneras de medir su impacto en la ejecución runtime en WebIDE:</p> - -<ul> - <li><a href="/docs/Tools/WebIDE/Monitor">Monitor</a> este panel ofrece una buena perspectiva del desempeño del dispositivo. Este ayuda a detectar problemas, e.g. un súbito, incremento excesivo en el uso de memoria de la app (debilidad).</li> - <li><a href="/docs/Tools/Profiler">Profiler</a> esta herramienta tool le brinda una manera para analizar una simple huella app's footprint con gran detalle. Especialmente útil cuando investiga un problema conocido de ejecución performance.</li> -</ul> - -<h2 id="Corrección_de_problemas">Corrección de problemas</h2> - -<p>Si tiene algunos problemas trabajando con WebIDE, vea la página <a href="/en-US/docs/Tools/WebIDE/Troubleshooting">Troubleshooting</a>.</p> - -<p> </p> - -<p> </p> diff --git a/files/es/tools/webide/monitor/index.html b/files/es/tools/webide/monitor/index.html deleted file mode 100644 index c48c5a8d06..0000000000 --- a/files/es/tools/webide/monitor/index.html +++ /dev/null @@ -1,158 +0,0 @@ ---- -title: Monitor -slug: Tools/WebIDE/Monitor -translation_of: Archive/WebIDE/Monitor ---- -<div class="summary"> -<p>El WebIDE Monitor es una herramienta de datos de propósito general diseñada para ayudar a controlar el desempeño de las aplicaciones y dispositivos <a href="https://developer.mozilla.org/en-US/Firefox_OS">Firefox OS</a>.</p> -</div> - -<p><img alt="The WebIDE Monitor" src="https://thefiletree.com/jan/shots/monitor/monitor.png" style="height: 464px; width: 800px;"></p> - -<p>El Monitor es capaz de mostrar gráficos interactivos en tiempo real para visualizar series de tiempo.</p> - -<h2 id="Gráficos_disponibles">Gráficos disponibles</h2> - -<p>El Monitor viene con algunos gráficos diferentes. Ellos se muestran usualmente una vez que el WebIDE es conectado a un Firefox OS runtime.</p> - -<h3 id="Selección_de_medida_única">Selección de medida única</h3> - -<p><img alt="Unique Set Size" src="https://thefiletree.com/jan/shots/monitor/uniquesetsize.png" style="height: 310px; width: 879px;"></p> - -<p>Este gráfico muestra el footprint de la memoria de todos los procesos de Firefox OS a través del tiempo. Si quieres saber el consumo de memoria de una app de Firefox OS, lanzalo y podrás ver la memoria privada usada por el proceso.</p> - -<h2 id="Mostrando_tus_propios_datos">Mostrando tus propios datos</h2> - -<p>Es relativamente fácil mostrar cualquier tipo de dato en el Monitor, porque acepta actualizaciones de forma-libre desde muchos orígenes diferentes.</p> - -<h3 id="Desde_un_dispositivo_Firefox_OS">Desde un dispositivo Firefox OS</h3> - -<p>Es posible enviar datos desde un dispositivo conectado enviando notificaciones de observación.</p> - -<p>Nota: Si quieres hacer esto en una <a href="https://developer.mozilla.org/Marketplace/Options/Packaged_apps#Certified_app" title="Certified app"> aplicación certificada</a>, por favor sigue <a href="https://developer.mozilla.org/docs/Tools/WebIDE#Debugging_certified_apps" title="Debugging certified apps">las siguientes instrucciones</a>.</p> - -<h4 id="JavaScript">JavaScript</h4> - -<p><code>Services.obs.notifyObservers(null, 'devtools-monitor-update', data);</code></p> - -<p>Puedes enviar datos desde cualquier código Javascript con privilegios de chrome. Aqui hay un ejemplo completo midiendo el run time de un codigo en Javascript:</p> - -<p><code>const Services = require('Services');<br> - <br> - var start = Date.now();<br> - // code to benchmark<br> - var stop = Date.now();<br> - <br> - var data = { graph: 'Performance', myFeature: stop-start, time: stop }</code><code>;<br> - Services.obs.notifyObservers(null, 'devtools-monitor-update', JSON.stringify(data));</code></p> - -<h4 id="C">C++</h4> - -<p><code>observerService->NotifyObservers(nullptr, "devtools-monitor-update", data);</code></p> - -<p>Puedes enviar datos desde cualquier parte en Gecko. Aqui hay un ejemplo completo midiendo el run time de un codigo:</p> - -<p><code>#include <time.h><br> - #include "nsPrintfCString.h"<br> - #include "nsIObserverService.h"<br> - <br> - clock_t start = clock();<br> - // code to benchmark<br> - clock_t stop = clock();<br> - double time = (double)(stop - start) / (CLOCKS_PER_SEC / 1000);<br> - <br> - nsCOMPtr<nsIObserverService> observerService = services::GetObserverService();<br> - if (observerService) {<br> - nsPrintfCString str("{\"graph\":\"Performance\",\"myFeature\":%f}", time);<br> - nsAutoString data = NS_ConvertUTF8toUTF16(str);<br> - observerService->NotifyObservers(nullptr, "devtools-monitor-update", data.get());<br> - }</code></p> - -<h3 id="Desde_el_computador">Desde el computador</h3> - -<p>Puedes facilmente enviar datos al Monitor sobre un servidor WebSocket. Esto puede ser útil si estás escribiendo una extensión para Firefox, una herramienta de línea de comandos o un servicio web..</p> - -<p>Por defecto, el Monitor busca un servidor corriendo en el puerto 9000 de tu computador. Puedes cambiar esto actualizando las preferencias en <code>devtools.webide.monitorWebSocketURL</code>.</p> - -<p>Incluso puedes hacer que acepte datos desde tu red local, o desde cualquier parte de Internet.</p> - -<h4 id="Node.js">Node.js</h4> - -<p><code>TODO</code></p> - -<h4 id="Python">Python</h4> - -<p><code>TODO</code></p> - -<h3 id="Formatos_soportados">Formatos soportados</h3> - -<p>El Monitor acepta datos en formato de objetos JSON que generalmente lucen similares a esto:</p> - -<p><code>{</code><br> - <code> "graph": "myGraph",<br> - "curve": "myCurve",<br> - "value": 42,<br> - "time": 1234567890<br> - }</code></p> - -<p>Ese formato está destinado a ser muy flexible. Si no existe un gráfico o curva especificada , se creará automáticamente.</p> - -<h4 id="Nombres_arbitrarios">Nombres arbitrarios</h4> - -<p>Las entradas no reconocidas serán consideradas como curvas de nombre y valor.</p> - -<p>El paquete de datos más pequeño que puedes enviar es algo como:</p> - -<p><code>{ "myCurve": 42 }</code></p> - -<p>Esto añadirá un punto de datos para "<code>myCurve</code>" en un gráfico sin nombre. El tiempo faltante será por defecto cuando el monitor recibe el paquete .</p> - -<p>Para mayor precisión, es probablemente mejor especificar un <code>timestamp</code> para tus datos:</p> - -<p><code>{<br> - "current": 60,</code><br> - <code> "voltage": 500,<br> - <code>"time": 1234567890</code><br> - }</code></p> - -<h4 id="Multiples_variables">Multiples variables</h4> - -<p>En una simple actualización, puedes enviar datos para multiples curvas:</p> - -<p><code>{<br> - "graph": "myGraph",<br> - "myCurve1": 50,<br> - "myCurve2": 300,<br> - "myCurve3": 9000,<br> - "time": 1234567890<br> - }</code></p> - -<p>O varios puntos de datos para una sola curva:</p> - -<p><code>{<br> - "graph": "myGraph",<br> - "curve": "myCurve",<br> - "values": [<br> - { "time": 1234567890, "value": 42 },<br> - { "time": 1234567981, "value": 51 }<br> - ]<br> - }</code></p> - -<h4 id="Múltiples_actualizaciones">Múltiples actualizaciones</h4> - -<p>Y también puedes enviar multiples actualizaciones de datos en forma de un Array:</p> - -<p><code>[<br> - { "graph": "Memory", "time": 1234567890, "System": 2600, "My App": 1000 },<br> - { "graph": "Power", "time": 1234567890, "current": 60, "voltage": 500 }<br> - ]</code></p> - -<h4 id="Eventos_puntuales">Eventos puntuales</h4> - -<p>Para marcar eventos especiales en un gráfico con una barra vertical, agrega una clave <code>event</code> a tu actualización:</p> - -<p><code>{<br> - "graph": "myGraph",<br> - "event": "myEvent",<br> - "time": 1234567980<br> - }</code></p> diff --git a/files/es/tools/webide/troubleshooting/index.html b/files/es/tools/webide/troubleshooting/index.html deleted file mode 100644 index 73d94afd9a..0000000000 --- a/files/es/tools/webide/troubleshooting/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: Resolución de problemas con WebIDE -slug: Tools/WebIDE/Troubleshooting -translation_of: Archive/WebIDE/Troubleshooting ---- -<h2 id="Conectando_un_dispositivo_Firefox_OS">Conectando un dispositivo Firefox OS</h2> -<p>Si estas intentando conectar un dispositivo Firefox OS a WebIDE y no aparece, aquí hay una serie de cosas que puedes probar</p> -<ul> - <li>Revisa la versión de Firefox OS: asegurate que tu dispositivo tiene una versión<strong> Firefox OS 1.2/Boot2Gecko 1.2 o superior</strong>. Para comprobar la versión, accede a los Ajustes de la aplicación en el dispositivo, después accede a<code> Información del dispositivo > Software</code>. Si no posees una versión superior, encuentra tu dispositivo en la <a href="/en-US/Firefox_OS/Developer_phone_guide">guía del desarrollador del teléfono</a> y sigue las instrucciones para actualizar.</li> - <li>Activa la depuración remota: en los Ajustes de aplicación en el dispositivo, dirígete a <code>Información del dispositivo > Más información > Desarrollo</code>. - <ul> - <li>Firefox OS 1.3 o inferior: "Desarrollo remoto" es simplemente una casilla. Activa la casilla.</li> - <li>Firefox OS 1.4 o superior: "Desarrollo remoto" te pregunta si deseas activarlo solo para ADB or para ADB y DevTools. Selecciona "ADB y DevTools".</li> - </ul> - </li> - <li>Desactiva el bloqueo de pantalla en tu dispositivo: en los Ajustes de aplicación en el dispositivo, accede a <code>Bloqueo de pantalla</code> y desactiva la casilla <code>Bloqueo de pantalla</code>. Esto es una buena idea porque cuando se bloquea la pantalla, la conexión con el teléfono se pierde, impidiendo que se pueda usar para desarrollar.</li> - <li>Asegurate que no hayas conectado un teléfono Android al mismo tiempo que un teléfono Firefox OS al ordenador.</li> - <li>Comprueba el cable USB que estas usando: - <ul> - <li>Prueba a desconectar y conectar el cable USB.</li> - <li>Prueba a conectar el cable USB en otro puerto del ordenador. Puede ser que tengas que alternar entre los puertos.</li> - <li>Prueba un cable USB distinto. Los cables que se incluyen con los teléfonos suelen ser de poca calidad y fallan con frecuencia.</li> - <li>Prueba un cable USB mas corto. Los cables USB largos no suelen trabajar tan bien como uno corto.</li> - </ul> - </li> - <li>Intenta descatira y reactivar el Desarrollo Remoto en los Ajustes de aplicación del dispositivo.</li> - <li>Si <a href="/en-US/docs/Tools/WebIDE#Custom_runtimes">tu desactivaste el complemento ADB Helper</a>, ¿has ejecutado correctamente el comando <code>adb forward</code> ?</li> - <li>Si usas Linux, asegurate que has añadido un archivo de reglas a <code>udev</code> , como se detalla en el paso 3 de esta guia para <a class="external external-icon" href="http://developer.android.com/tools/device.html#setting-up"> configurar un dispositivo Android</a>. El atributo <code>idVendor</code> para usar el Geeksphone es "05c6", y <a class="external external-icon" href="http://developer.android.com/tools/device.html#VendorIds">esta página</a> lista otros valores para <code>idVendor</code> .</li> - <li>Si usas Windows: - <ul> - <li>necesitas instalar drivers, como se detalla en el paso 3 de esta guia para <a class="external external-icon" href="http://developer.android.com/tools/device.html#setting-up">configurar un dispositivo Android</a>. Puedes encontrar drivers para dispositivos Geeksphone en la <a class="external external-icon" href="http://downloads.geeksphone.com/">pagina web Geeksphone</a> y drivers para dispositivos Google en <a href="http://developer.android.com/sdk/win-usb.htm">la página de Google</a>. Windows 8 por defecto no permite instalar drivers no firmados. Mira este tutorial en <a class="external-icon external" href="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html" title="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html">"Como instalar drivers no firmados en Windows 8"</a>.</li> - <li>si el WebIDE no puede localizar su dispositivo después de seguir todos los pasos, puede necesitar <a class="external-icon external" href="http://blog.fh-kaernten.at/wehr/?p=1182">editar adb_usb.ini</a>.</li> - </ul> - </li> - <li>Si eres un usuario de EasyTether (OS X), necesitaras desinstalar o desactivar EasyTether: <code>sudo kextunload /System/Library/Extensions/EasyTetherUSBEthernet.kext</code></li> -</ul> -<h3 id="Desarrollo_limitado_(incluyendo_aplicaciones_certificadas_aplicaciones_incorporadas_aplicaciones_ya_instaladas_en_un_dispositivo)">Desarrollo limitado (incluyendo aplicaciones certificadas, aplicaciones incorporadas, aplicaciones ya instaladas en un dispositivo)</h3> -<p>Si no puedes desarrollar aplicaciones certificadas, aplicaciones incorporadas, o aplicaciones instaladas en un dispositivo real, entonces puede que estés siendo restringido sobre la política de seguridad de privilegios de WebIDE's . Para mas información, acceda a la sección <a href="/en-US/docs/Tools/WebIDE#Unrestricted_app_debugging_%28including_certified_apps.2C_main_process.2C_etc.%29">Desarrolo no restringido de aplicaciones (incluyendo aplicaciones certificadas, procesos principales, etc.)</a>.</p> -<h2 id="Conectando_a_otros_navegadores_(Chrome_Safari)">Conectando a otros navegadores (Chrome, Safari)</h2> -<p>WebIDE hace el uso de <a href="/en-US/docs/Tools/Firefox_Tools_Adapter">Valence (Adaptador Formal de Herramientas de Firefox )</a> para comunicarse con otros navegadores, como Chrome and Safari. </p> -<p>Si esta teniendo problemas al conectarse a estos otros navegadores, revisa los pasos de configuración y otras anotaciones para estos navegadores en la <a href="/en-US/docs/Tools/Firefox_Tools_Adapter">página Valence</a>.</p> -<h2 id="Activando_el_log">Activando el log</h2> -<p>También puedes activar el logging para recompilar información de diagnostico:</p> -<ol start="1" style="list-style-type: decimal;"> - <li>accede a <a class="external external-icon" href="http://kb.mozillazine.org/About:config">about:config</a>, y añade una nueva preferencia llamada <span class="message"><span class="content"><code><span class="email">extensions.adbhelper@mozilla.org.sdk</span>.console.logLevel</code>, con el valor de String <code>all, y establece </code></span></span>extensions.adbhelper@mozilla.org.debug<span class="message"><span class="content"><code> a true</code></span></span></li> - <li>En el <a class="external external-icon" href="https://support.mozilla.org/en-US/kb/disable-or-remove-add-ons">Add-ons Manager</a>, desactiva y reactiva el add-on ADB Helper.</li> - <li>Abre la <a href="https://developer.mozilla.org/en-US/docs/Tools/Browser_Console">Consola del navegador</a> y veras mensajes de consola con el prefijo <code>adb</code>. Si el mensaje no te dice nada, <a href="/en-US/docs/Tools/WebIDE/Troubleshooting#Get_help">busca ayuda</a>.</li> -</ol> -<h2 id="Obtén_ayuda">Obtén ayuda</h2> -<p>Accede a <a class="external external-icon" href="https://wiki.mozilla.org/DevTools/GetInvolved#Communication">#devtools cuarto en IRC</a> y nosotros te ayudaremos.</p> |