Herramienta de elementos esenciales para desarrolladores web |

1. Introducción de la inspeccionar en particular para los desarrolladores web: Saludos a todos. Yo soy Susan para ellos. Y hoy aprenderemos algunos consejos y trucos útiles utilizando el Elemento Inspect de Google Chrome. Estas cintas, voy a ser útil para todos, pero sobre todo lo hicieron las que trabajaban en el desarrollo de sitios web. Entonces esto es lo que está incluido. Aprenderemos rápidamente sobre el recolector de color incorporado con elemento inspect, sin necesidad de ninguna extensiones de Chrome. También para muchos, este vaso no funciona, por lo que aprenderemos a arreglarlos. Entonces desarrolladores web, ¿tuviste problemas para encontrar ID con elementos de tiding? Aprenderemos un truco rápido sobre cómo puedes usar el elemento inspect en ellos. Entonces encontraremos ahora pasaporte engañado utilizando el elemento inspect. Y por último, descubriremos cómo podemos cambiar texto e imágenes desde una página web en vivo. Entienda también cómo se pueden manipular los datos utilizando estas herramientas. De esta manera, el único objetivo de este curso es darte alguna información esencial sobre Inspect Element y cómo puedes utilizarlos. ¿ Qué aprenderás en este curso? Este curso te dará información útil escogido a mano sobre Google inspect element y cómo puedes usarlos mientras desarrollas tu página web también te da un lado de Cassius que no todo lo que ves en el vireo de internet. Así que ten cuidado. Qué habilidades o conocimientos de codificación se requieren para esta lección. Todo en este curso está claramente explicado. Todo lo que debes saber es cómo usar Google Chrome. Además, si eres desarrollador web, tener una idea de usar CSS te dará un beneficio extra. Conclusión, después de este curso, deberías estar teniendo alguna idea sobre el uso de elemento inspect y cómo puede contribuir a tu proceso de diseño oral y desarrollo web. Entonces, empecemos. 2. Inspecciona los consejos y trucos de los elementos útiles para los desarrolladores web: Saludos a todos. En el tutorial de hoy, aprenderemos rápidamente algunos de los consejos y trucos útiles para usar inspect element. Esto puede ser muy útil para todos. Y si te gusta el diseño de sitios web, entonces esto puede ser muy útil. Entonces, empecemos. Para empezar. Abramos nuestro navegador. Entonces si estás diseñando algo o quieres encontrar el color que ves en la pantalla, entonces puedes hacerlo con inspect element. Por supuesto, puedes usar una extensión de Chrome para ello. Pero, ¿por qué molestarse cuando tenemos un recolector de color incorporado? Permítanme buscar rápidamente algunos conjuntos de colores. Entonces aquí están las opciones. Déjame recoger esto. Supongamos que quiero encontrar los colores que está usando, poder adaptarlo a mi InDesign. Para hacer eso, simplemente haga clic derecho y vaya a Inspeccionar elemento en estos estilos. Si ves algún color, está bien. Si no, simplemente agrega color y blanco o cualquier color, realmente no importa. Ahora esto traerá este recolector de color, haga clic en él, y ahora podrás encontrar el color. Haga clic aquí y otra vez al color que desee utilizar. En ocasiones esto no funciona, como puedes ver, para que esto funcione, tendrás que llevar esta sección oscura ya sea a la izquierda o a la derecha. Para ello, haga clic aquí, lo llevaré al lado izquierdo y de nuevo, haga clic en este recolector de color. Haga clic aquí. Y se puede ver que está funcionando. Elige el color que quieras. Encontrará los detalles de Higgs y RGBA y luego lo usará como corresponda. Entonces simplemente puedes mover la oscuridad en la parte inferior. Esto funciona en la mayoría de los sitios web. Déjame revisar rápidamente otro lado. Entonces como puedes ver, está funcionando Todo bien. Ahora bien, si eres desarrollador web y debes estar usando elemento inspect para hacer los cambios CSS y muchos más. Pero a veces es difícil usar CSS para ocultar elementos. Por ejemplo, en este lado, si hago clic en música y si quiero hacer cambios en este menú, y en cuanto hago click en Inspeccionar Elemento, esto desaparece. Pero no se preocupe, podemos pausar y usar la herramienta Inspeccionar Elemento para eso. Vaya a George's y luego haga clic en el menú de ocultación y mantenga el ratón ahí y presione F8. Ahora lo que pasa es que provoca la pantalla como puedes ver, y puedes usar fácilmente este Inspect Element. Entonces aquí está el ID del menú y puedo hacer los cambios necesarios. Y después de que hayas terminado, simplemente se cierra y todo va a ser todo normal. Ahora otro simple uso de Inspect Element podría ser encontrar esta contraseña guardada. Supongamos que ha iniciado sesión en algunos pasos y se ha olvidado de la contraseña. Después usando el elemento inspect, puedes encontrar la contraseña que usaste. Por ejemplo, tengo una contraseña guardada en este navegador Brave, pero también funciona exactamente igual en Chrome. Ahora suponga que si voy a este sitio web, se puede ver que hay una contraseña segura. No todos los sitios web tendrán esta opción. En tal caso, simplemente puede hacer clic derecho, Inspeccionar, hacer clic aquí, y Hoover hacer esta contraseña. Ahora en tipo de entrada, haga doble clic en contraseña y cámbiala a texto y Enter. Por lo que se puede ver que se revela la contraseña. Este truco convertirá todos los puntos negros al texto. Por ejemplo, si voy a Facebook y si se guarda así. Y desea encontrar la contraseña utilizada, simplemente haga clic derecho en Inspeccionar, exagere la contraseña y luego cambie el tipo de entrada a texto. Y va a funcionar. Todo genial. Ahora la última parte de este tutorial, puede ser muy útil, sobre todo si eres desarrollador web o estás buscando desarrollar un sitio web. Esto también se puede utilizar para realizar algunos cambios en un sitio web en vivo y ver cómo se verá. Muchos desarrolladores usan temas para su sitio web y antes de comprarlo, querrías ver cómo se vería la demo con tu propio logotipo, imágenes y texto. Esto puede ser muy útil para mostrárselo a tu cliente también. Vayamos al tema del bosque ordinate como ejemplo y busquemos un tema. Por ahora, lo intentaré con enfold. Aquí hay un tema. Haga clic en él. Y vamos a revisar la vista previa en vivo. Ahora supongamos que quieres crear un sitio web usando una de sus demos, o quieres que tu cliente vea el sitio web? Déjame escoger un sitio web de demostración. Está bien, éste. El sitio se ve bien, pero quiero ver cómo se verá con mis propias imágenes, logotipo, y texto. Para eso, simplemente haga clic derecho y vaya a Inspeccionar. Ve a consola. Copia este código. Esto será proporcionado y pegado en la parte inferior y Enter. Ahora puedes realizar cualquier cambio de garrapatas en este sitio web. Cierra esto. Ahora voy a hacer algunos cambios en el texto. Por lo tanto, hacer todos los cambios a los textos del sitio. No obstante, por favor, porque sí, mientras se realizan cambios en el menú, ya que podría abrir el enlace y todo se refrescará. Entonces lo dejaré tal como está. Después de los intercambios. Se puede quitar la parte superior. Con razón, Inspeccionar Elemento. Haga clic aquí, resalte esto, todos. Entonces haga clic aquí, haga clic derecho y elimine el elemento. Ahora ya se ha ido. Ahora vamos a reemplazarlo por nuestro propio logotipo. Me gustaría utilizar este logo. Si tienes tus imágenes en línea, simplemente puedes usar la dirección de correo electrónico. Por ejemplo, haré clic derecho y copiaré la dirección de la imagen. Haga clic aquí, y en el logotipo. Ahora aquí está el enlace exacto. Sustitúyalo por tu propio enlace y entra. De igual manera para cambiar el banner, hacer lo mismo, debes saber reemplazar imágenes y otras. Para utilizar esta herramienta de manera efectiva, podría tener que buscar arriba y abajo una búsqueda de JPEG, PNG o Web API presionando Control plus F. De todos modos, me gusta usar este correo electrónico como banner. Puede publicar esto en línea en cualquier lugar y obtener un enlace. Voy a ir a snip board dot io, archivo picker. Una vez subido, haga clic en el enlace y haga clic derecho en el correo electrónico y obtenga su URL. Copia la dirección de la imagen, y ahora reemplácela en el sitio web. Ya que esto tiene tres pancartas, usaré lo mismo para todos. Después podrás tomar la captura de pantalla y mostrarla a tus clientes. O bien puede salvarlo. Simplemente presione Control S en el teclado dado un nombre y guarde. Esta opción de ahorro, sin embargo, puede no ser tan efectiva. Por lo que se aconseja tomar una captura de pantalla. Entonces de todos modos, esto se está ejecutando desde la unidad C, como se puede ver. Déjame cerrar todos los navegadores. Y aquí está el guardado como el archivo ML. Y funciona todo bien con nuestro propio logotipo e imágenes y texto. Puedes usar el mismo código en cualquiera de tu sitio web y realizar los cambios necesarios antes de trabajar realmente en el back-end. Por lo que realmente espero que todos estos consejos y trucos sean útiles. Muchas gracias. 3. Copia texto de imágenes de las sitios web con una extensión de Google Chrome: Saludos a todos. En el tutorial de hoy, aprenderemos rápidamente sobre una extensión de Chrome que puede copiar texto de un correo electrónico, algo como esto. Empecemos a usar la extensión Chrome. Podemos copiar texto de imágenes de sitios web. No obstante, tenga en cuenta que puede no funcionar en todos los lados y puede no ser un 100% correcto. De todos modos, abramos nuestro sitio. Vamos a aprender algoing.com. Se puede ver que esto es un correo electrónico también este es un correo electrónico y no podemos copiar texto de ellos. Entonces para copiar texto, google proyecto nafta. Este es el uno. Haga clic en él. Para Chrome Agregar extensión. Se ha añadido la extensión. Puedes anclarlo si quieres verlo aquí. Ahora déjame reabrir Chrome e ir al sitio aquí vamos a aprender algoing.com. Se puede ver si esto es coloreado, eso significa que los datos se pueden copiar en el sitio. Se puede ver que puedo copiar este texto. Déjame pegarlo en el Bloc de notas. Como se mencionó anteriormente, el texto de copia puede no ser tan perfecto. No obstante, puede corregirlo manualmente o usar extensiones gramáticas para realizar los cambios necesarios. Espero que este video sea útil. Muchas gracias. 4. ¿Cómo editar el texto de cualquier sitio web con la función de inspeccionar y guardarlo permanenteme: Saludos a todos. En el tutorial de hoy, encenderemos rápidamente cómo las personas pueden usar Inspect Element permanentemente, guardarlo en esa formación particular de disfraz BC AD. Entonces algo como esto, esto se quedará Parramatta lo a este navegador en particular a menos que reciba o abra el modo incógnito. Entonces empecemos. Entonces, para empezar, abramos un navegador e instalemos la extensión de Chrome. Simplemente busque un elemento de inspección permanente. Este es el uno. Haga clic en él a Chrome. Agregar extensión. Por lo que se ha agregado la extensión. Haga clic aquí y sea la extensión. Por lo que es visible aquí. A ver si realmente no necesitas, la extensión no será visible de todos modos. Ahora vamos a ir a nuestra página web de muestra dirección Cutler do.com. Por lo que este es el sitio web. Por cierto, puedes probar con cualquier sitio web que quieras. Hagamos algunos cambios en el texto de este sitio web para eso, con razón consiguió el sitio web, haga clic en Inspeccionar Elemento o a consola. Copia este código el cual se proporcionará calor basado agregado. Si conoces CSS que puedes usar eso para grandes cambios al texto de color. De todos modos visita un restar, que cierran la consola. Ahora con el código anterior, no puedes hacer ningún cambio en el texto que quieras. Después de realizar todos los cambios o obtener clic derecho Inspeccionar elemento, vaya a COX-1. Copia de nuevo este código, y pegado. Ahora, cambia lo verdadero a falso. Edita y cierra esta consola. Ahora no podrás cambiar el texto de este sitio web. Después de eso, simplemente haga clic en esta extensión. Haga clic en Guardar paga. Por favor, haga clic unas cuantas veces para asegurarse de que esté guardado. Por lo que la base debería tener. Veamos si está funcionando o no. Refresca el espacio. Se puede ver todos los cambios en el texto siguen aquí. Déjame intentar abrirlo en otra ventana. Todavía se pueden ver todos los cambios que se hicieron. Probemos rápidamente facebook.com. Entonces como puedes ver, está funcionando en Facebook D2. Aunque abro un nuevo navegador, está funcionando. Déjame cerrar el navegador Chrome y abrirlo de nuevo. Facebook.com y copa de erosión y el más oscuro. Para que puedas ver todos los cambios siguen aquí. No obstante, tenga en cuenta, si borra el navegador o abre el modo incógnito, todo volverá al orginal. ¿ Esto básicamente significa que sólo se guarda el navegador y en tu PC solamente y no se reflejará en otras computadoras. Y si quieres restablecerlo, simplemente haz clic en la extensión y haz clic en reiniciar todo y refrescar. Por lo que todo en el espacio ha sido revertido. Tendrás que hacer lo mismo para otros negocios también. Y una nota muy importante, hemos visto a mucha gente usar este truco para coser higo, palabras de YouTube y otras ganancias de afiliados. Así que por favor ten en cuenta antes de hacer cualquier egipcio, ya que es muy fácil que te engañen. En fin, esperamos que hayas aprendido algo nuevo. Muchas gracias. 5. Cómo reiniciar un inspector de cromado y cambiar la posición de la cual se encuentra: Saludos a todos. En este video, aprenderemos rápidamente cómo puedes restablecer o restaurar las Herramientas de Desarrollador de Chrome a los predeterminados. Y como vamos a mover la posición oscura. Entonces básicamente puedes mover tu oscuridad a la derecha, abajo, izquierda, e incluso desacoplar están separados. Entonces, empecemos. Ahora por alguna razón, si la configuración de la herramienta Dave ha cambiado, entonces simplemente puedes restaurarla a la configuración predeterminada. Por eso. Déjame abrir Chrome, haz clic con el botón derecho y ve a Inspeccionar, resaltar cualquier parte de la herramienta y pulsa F1 en tu teclado. Ahora desplácese hacia abajo y verá los predeterminados del restaurante y recargar, haga clic en él. Y ahora tus DevTools se restauran a los predeterminados. También puedes cambiar la posición de las Herramientas de Desarrollador de Chrome. Da click en estos tres puntos y elige dónde querrías mantener la oscuridad. Actualmente está en la posición correcta. Esto da la oscuridad en la parte inferior. Esto mantendrá la oscuridad a la izquierda, o haga clic aquí para separar la oscuridad. De todos modos, me gustaría mantenerlo en el fondo de esta lesión fue útil. Muchas gracias. 6. Ejemplo de usar la función Inspeccionar el elemento en YouTube: Saludos a todos. Por lo que antes de empezar nada, déjame ir rápidamente a nuestro canal de YouTube. Oye, aprendamos algo. Por lo que aquí puedes ver los ingresos, las ganancias del mes de mayo por si tienes alguna duda. Permítanme reformularlo rápidamente. Entonces aquí está. Lo que sea que viste aquí fue una mentira. Entonces básicamente, el único objetivo de este tutorial es a donde todos y te hacen entender que no todo lo que ves en línea Israel, pero claro que hay mucha gente genuina que es muy cierta. De todos modos, mostraré cómo se hace usando el elemento inspect. Empecemos. Como debes saber, Google Chrome ofrece muchas herramientas div, y una de ellas es inspect element. Puedo hacer clic derecho e inspeccionar elemento. Y esto funciona en la mayoría de los sitios. Si voy a consola y copio este código y pegado en la parte inferior y entro y cierro este elemento. Ahora, todo en este sitio web es editable. Puedes hacer todos los cambios necesarios y luego simplemente puedes mostrarlo como una captura de pantalla o como un video. Ahora para demostrarlo es auténtico, sobre todo en el video, lo vuelvo a referir y rápidamente hago todos los cambios como este. Y posteriormente editado en el editor de video. Tenga en cuenta, ya había cambiado las ganancias para este canal de todos modos. Entonces ahora esto sí se ve muy real, ¿no? Este truco Inspect Element funciona en la mayoría de los sitios web. Abramos nuestra página web. Aprendamos algo.ing.com. Haga clic derecho y vaya al elemento inspeccionar, vaya a la consola y copie este código y pegue el código. Ahora puedes realizar cualquier cambio en el texto de la página web. Entonces así es como la gente en línea podría confundirte. Entonces solo ser un poco costó años de lo que sea que veas en línea. Pero solo ten cuidado. De verdad espero que el distrito fuera interesante. Muchas gracias.