Transcrições
1. Introdução : como usar elementos de pesquisa especialmente para desenvolvedores da web: Saudações a todos. Eu sou Susan para eles. E hoje vamos aprender algumas dicas
e truques úteis usando o Google Chrome Inspect Element. Estas fitas, Eu vou ser útil para todos, mas especialmente aqueles que trabalham no desenvolvimento do site. Então aqui está o que está incluído. Aprenderemos rapidamente sobre o seletor de cores embutido com elemento de inspeção, sem necessidade de extensões do Chrome. Também para muitos, este copo não funciona, então aprenderemos a corrigi-los. Então, desenvolvedores da web, você teve problemas para encontrar ID com elementos de tiding? Vamos aprender um truque rápido sobre como você pode usar o elemento inspecionar sobre eles. Vamos então encontrar agora enganado passaporte usando o elemento inspecionar. E, por fim, vamos descobrir como podemos mudar texto e imagens de um site ao vivo. Entenda também como os dados podem ser manipulados usando essas ferramentas. Assim, o único objetivo deste curso é dar-lhe algumas informações essenciais sobre Inspect Element e como você pode usá-los. O que você aprenderá neste curso? Este curso lhe dará informações úteis escolhidas sobre o elemento Google inspecionar e como você pode usá-los durante o desenvolvimento do seu site também lhe dá um lado Cassius que nem tudo que você vê na internet vireo. Então, tenha cuidado. Quais habilidades ou conhecimentos de codificação são necessários para esta lição. Tudo neste curso é claramente explicado. Tudo o que você precisa saber é como usar o Google Chrome. Além disso, se você é um desenvolvedor web, ter uma idéia de usar CSS lhe dará um benefício extra. Conclusão, após este curso, você deve estar recebendo alguma idéia sobre o uso de elemento inspecionar e como ele pode contribuir para o seu processo de design oral e desenvolvimento web. Então vamos começar.
2. Dicas e truque úteis de elementos de pesquisa úteis para desenvolvedores da web: Saudações a todos. No tutorial de hoje, vamos aprender rapidamente algumas das dicas úteis e truques para usar elemento inspecionar. Isso pode ser muito útil para todos. E se você estiver em design de site
, isso pode ser muito útil. Então vamos começar. Para começar. Vamos abrir nosso navegador. Então, se você está projetando qualquer coisa ou quer encontrar a cor que você vê na tela, então você pode fazê-lo com elemento inspecionar. Claro, você pode usar uma extensão do Chrome para isso. Mas por que se preocupar quando temos um seletor de cores embutido? Deixe-me procurar rapidamente por alguns conjuntos de cores. Então, aqui estão as opções. Deixe-me pegar isso. Suponha que eu queira encontrar as cores que ele está usando, que eu
possa adaptá-la ao meu InDesign. Para fazer isso, basta clicar com o botão direito do mouse e ir para Inspecionar Elemento nesses estilos. Se vir alguma cor, tudo bem. Se não, basta adicionar cor e branco ou qualquer cor, realmente não importa. Agora isso trará este seletor de cores, clique nele, e agora você pode encontrar a cor. Clique aqui e sobre a cor que deseja usar. Às vezes isso não funciona, como você pode ver, para fazer isso funcionar, você terá que levar essa seção escura para a esquerda ou para a direita. Para fazer isso, clique aqui, vou levá-lo para o lado esquerdo e, novamente, clique neste seletor de cores. Clique aqui. E você pode ver que está funcionando. Escolha qualquer cor que você quiser. Você vai encontrar os detalhes de Higgs e RGBA e, em seguida, usá-lo como em conformidade. Então você pode simplesmente mover o escuro na parte inferior. Isso funciona na maioria dos sites. Deixe-me verificar rapidamente outro lado. Então, como pode ver, está funcionando muito bem. Agora, se você é um desenvolvedor web e você deve estar usando elemento
inspecionar para fazer as alterações CSS e muito mais. Mas às vezes é difícil usar CSS para ocultar elementos. Por exemplo, neste lado, se eu clicar em música e se eu quiser fazer alterações neste menu, e assim que eu clicar em Inspecionar Elemento, isso desaparece. Mas não se preocupe, podemos pausar e usar a ferramenta Inspecionar Elemento para isso. Vá para George e, em seguida, clique no menu oculto e mantenha o mouse lá e pressione F8. Agora o que acontece é que faz com que a tela como você pode ver, e você pode facilmente usar este elemento inspecionar. Então aqui está o ID do menu e eu posso fazer as alterações necessárias. E depois que você terminar, simplesmente fecha e tudo será normal. Agora, outro uso simples do Inspect Element pode ser encontrar essa senha salva. Suponha que você tenha logado em alguns passos e se esqueceu da senha. Em seguida, usando o elemento inspecionar, você pode encontrar a senha que você usou. Por exemplo, eu tenho uma senha salva neste navegador Brave, mas ele funciona exatamente da mesma forma no Chrome também. Agora suponha que se eu for a este site, você pode ver que há uma senha segura. Nem todos os sites terão essa opção. Nesse caso, você pode simplesmente clicar com o botão direito do mouse, inspecionar, clicar aqui e Hoover fazer essa senha. Agora no tipo de entrada, clique duas vezes na senha e altere-a para texto e Enter. Então você pode ver que a senha é revelada. Este truque irá converter todos os pontos pretos para o texto. Por exemplo, se eu for para o Facebook e se ele for salvo assim. E você deseja encontrar a senha usada, basta clicar com o botão direito do mouse em Inspecionar, exagerar a senha e, em seguida, alterar o tipo de entrada para texto. E vai funcionar. Tudo ótimo. Agora, a última parte deste tutorial, ele pode ser muito útil, especialmente se você é um desenvolvedor web ou está olhando para desenvolver um site. Isso também pode ser usado para fazer algumas alterações um site ativo e ver como ele será parecido. Muitos desenvolvedores usam temas para seu site e antes de comprá-lo, você gostaria de ver como seria a demonstração com seu próprio logotipo, imagens e texto. Isso pode ser muito útil para mostrá-lo ao seu cliente também. Vamos para a floresta tema ordenar como um exemplo e procurar um tema. Por enquanto, vou tentar com enfold. Aqui está um tema. Clique nele. E vamos ver a pré-visualização ao vivo. Agora suponha que você queira criar um site usando uma de suas demonstrações, ou você quer que seu cliente veja o site? Deixe-me escolher um site de demonstração. Ok, este aqui. O site parece bom, mas eu quero ver como ele vai ficar com minhas próprias imagens, logotipo e texto. Para isso, basta clicar com o botão direito do mouse e ir para Inspecionar. Vá para a consola. Copie este código. Isso será fornecido e colado na parte inferior e Enter. Agora você pode fazer quaisquer alterações de ticks neste site. Feche isto. Agora vou fazer algumas alterações no texto. Então, faça todas as alterações nos textos do site. No entanto, por favor, porque sim, ao fazer alterações no menu, como ele pode abrir o link e tudo será atualizado. Então vou deixar como está. Depois das trocas. Você pode remover a parte superior. Corretamente, Inspecione Element. Clique aqui, destaque isso, tudo. Então clique aqui, clique com o botão direito e exclua o elemento. Agora ele se foi. Agora vamos substituí-lo por nosso próprio logotipo. Eu gostaria de usar este logotipo. Se você tiver suas imagens on-line, você pode simplesmente usar o endereço de e-mail. Por exemplo, vou clicar com o botão direito do mouse e copiar o endereço da imagem. Clique aqui e no logotipo. Agora aqui está o link exato. Substitua-o por seu próprio link e digite. Da mesma forma, para mudar o banner, faça o mesmo, você deve saber como substituir imagens e outros. Para usar esta ferramenta de forma eficaz, você pode ter que olhar para cima e para baixo uma pesquisa para JPEG, PNG ou Web API pressionando Control plus F. De qualquer forma, eu gosto de usar este e-mail como um banner. Pode postar isso online em qualquer lugar e obter um link. Eu vou para cortar placa dot io, arquivo picker. Uma vez carregado, clique no link e clique com o botão direito do mouse no e-mail e obtenha seu URL. Copie o endereço da imagem e substitua-o no site. Uma vez que este tem três banners, eu vou usar o mesmo para todos. Você pode então fazer a captura de tela e mostrá-la aos seus clientes. Ou também pode salvá-lo. Basta pressionar Control S no teclado com um nome e salvar. Esta opção de poupança, no entanto, pode não ser tão eficaz. Portanto, é aconselhável fazer uma captura de tela. Então, de qualquer maneira, isso está correndo da unidade C, como você pode ver. Deixe-me fechar todos os navegadores. E aqui está o salvo como o arquivo ML. E funciona tudo bem com nosso próprio logotipo, imagens e texto. Você pode usar o mesmo código em qualquer um de seu site e fazer as alterações necessárias antes de realmente trabalhar no back-end. Então eu realmente espero que todas essas dicas e truques sejam úteis. Muito obrigado.
3. Copiar texto de imagens de sites usando uma extensão do Google Chrome: Saudações a todos. No tutorial de hoje,
aprenderemos rapidamente sobre uma extensão do Chrome
que pode copiar texto de um e-mail,
algo assim. Vamos começar a usar
a extensão do Chrome. Podemos copiar texto de
imagens de sites. No entanto, observe
que pode não funcionar em todos os lados e pode
não estar 100% correto. De qualquer forma, vamos abrir nosso site. Vamos aprender alguma coisa. Você pode ver que este é um e-mail também é um e-mail e
não podemos copiar texto deles. Então, para copiar texto,
google project nafta. Este é o único. Clique nele. Para o
Chrome Add extensão. A extensão foi adicionada. Você pode fixá-lo se
quiser vê-lo aqui. Agora deixe-me reabrir o Chrome e ir ao site aqui vamos
aprender something.com. Você pode ver se isso está colorido, que significa que os dados podem ser
copiados no site. Você pode ver que posso
copiar este texto. Deixe-me colá-lo no Bloco de Notas. Como mencionado anteriormente, o texto da cópia pode
não ser tão perfeito. No entanto, você pode corrigi-lo
manualmente ou usar extensões gramaticais para
fazer as alterações necessárias. Espero que este vídeo seja útil. Muito obrigado.
4. Como editar qualquer texto de qualquer site usando o elemento de inspeção, e guardá-lo permanentemen: Saudações a todos. No tutorial de hoje, vamos rapidamente iluminar como as pessoas podem usar Inspect Element permanentemente, salvá-lo em que formação de disfarce BC AD particular. Então algo assim,
isso vai ficar Parramatta-lo para este navegador particular, a menos que o recebimento ou abertura do modo de navegação anônima. Então vamos começar. Então, para começar, vamos abrir um navegador e instalar a extensão do Chrome. Basta procurar um elemento de inspeção permanente. Este é o único. Clique nele no Chrome. Adicionar extensão. Assim, a extensão foi adicionada. Clique aqui e seja a extensão. Por isso, é visível aqui. Veja se você realmente não precisa, a extensão não será visível de qualquer maneira. Agora vamos para o nosso site de exemplo direção Cutler do.com. Então este é o site. By the way, você pode tentar com qualquer site que você quiser. Vamos fazer algumas alterações no texto deste site para isso, corretamente tem o site, clique em Inspecionar Elemento ou para console. Copie este código que será fornecido com base calor adicionado. Se você sabe CSS que você pode usar isso para grandes mudanças no texto de cor. Ele visita um subtrair de qualquer maneira, que fecha o console. Agora, com o código anterior, não é
possível fazer alterações no texto desejado. Depois de fazer todas as alterações ou obter o botão direito do mouse em Inspect Element, vá para COX-1. Copie este código novamente e colado. Agora, mude o verdadeiro para falso. Edite e feche este console. Agora você não será capaz de alterar o texto deste site. Depois disso, basta clicar nesta extensão. Clique em Salvar paga. Clique algumas vezes para se certificar de que está guardado. Então a base deveria ter. Vamos ver se está funcionando ou não. Atualize o espaço. Você pode ver todas as mudanças no texto ainda estão aqui. Deixe-me tentar abri-la em outra janela. Você ainda pode ver todas as alterações que foram feitas. Vamos experimentar rapidamente facebook.com. Então, como você pode ver, ele está trabalhando no Facebook D2. Mesmo que eu abra um novo navegador, ele está funcionando. Deixe-me fechar o navegador Chrome e abri-lo novamente. Facebook.com e copo de erosão e o mais escuro. Então você pode ver que todas as mudanças ainda estão aqui. No entanto, observe que se você limpar o navegador ou abrir o modo de navegação anônima, tudo voltará ao original. Isso basicamente significa que ele só é salvo no navegador e no seu PC e não refletirá em outros computadores. E se você quiser reiniciá-lo, basta clicar na extensão e clicar em redefinir tudo e atualizar. Então tudo no espaço foi revertido. Você precisará fazer o mesmo para outros negócios também. E uma nota muito importante, temos visto muitas pessoas usar esse truque para costurar figo, palavras
do YouTube e outros ganhos de afiliados. Portanto, por favor, esteja atento antes de fazer qualquer egípcio, pois é muito fácil ser enganado. De qualquer forma, esperamos que tenha aprendido algo novo. Muito obrigado.
5. Como redefinir o inspector de cromO e alterar a posição de doca: Saudações a todos. Neste vídeo, aprenderemos rapidamente como você pode redefinir ou restaurar o Chrome Developer Tools para padrões. E à medida que vamos mover a posição escura. Então, basicamente, você pode mover o escuro para a direita, baixo, para a esquerda e até mesmo desencaixar são separados. Então, vamos começar. Agora, por algum motivo, se a configuração da ferramenta Dave mudou, você pode simplesmente restaurá-la para o padrão. Para isso. Deixe-me abrir o Chrome, clique com o botão direito do mouse e vá para Inspecionar, realçar em qualquer lugar da ferramenta e pressione F1 no teclado. Agora role para baixo e você verá os padrões do restaurante e recarregar, clique nele. E suas DevTools agora são restauradas para padrões. Você também pode alterar a posição das Ferramentas do desenvolvedor do Chrome. Clique nesses três pontos e escolha onde você gostaria de manter o escuro. Atualmente está na posição certa. Isso dá o escuro na parte inferior. Isso manterá o escuro à esquerda ou clique aqui para separar o escuro. De qualquer forma, eu gostaria de mantê-lo na parte inferior desta lesão foi útil. Muito obrigado.
6. Exemplo de usar elementos de pesquisa no YouTube: Saudações a todos. Então, antes de começar qualquer coisa, deixe-me ir rapidamente para o nosso canal do YouTube. Ei, vamos aprender alguma coisa. Então aqui você pode ver a receita, os ganhos para o mês de maio no caso de você ter alguma dúvida. Deixe-me reformular rapidamente. Então aqui está. O que quer que tenha visto aqui era mentira. Então, basicamente, o único objetivo deste tutorial é onde todos e fazer você entender que nem tudo que você vê na linha Israel, mas é claro que há muitas pessoas genuínas que são muito verdadeiras. De qualquer forma, vou mostrar como é feito usando o elemento inspecionar. Vamos começar. Como você deve saber, o Google Chrome oferece muitas ferramentas div, e uma delas é inspecionar elemento. Posso clicar com o botão direito do mouse e inspecionar elemento. E isso funciona na maioria dos sites. Se eu ir para console e copiar este código e colado na parte inferior e entrar e fechar este elemento. Agora, tudo neste site é editável. Você pode fazer todas as mudanças necessárias e, em seguida, você pode simplesmente mostrá-lo como uma captura de tela ou como um vídeo. Agora, para mostrar que é autêntico, especialmente no vídeo, eu faço referência novamente e rapidamente faço todas as mudanças como esta. E mais tarde editado no editor de vídeo. Por favor, note que eu já tinha mudado os ganhos para este canal de qualquer maneira. Então agora isso parece muito real, não é? Este truque Inspect Element funciona na maioria dos sites. Vamos abrir nosso site. Vamos aprender algo. botão direito do mouse e vá para o elemento inspecionar, vá para o console e copie este código e cole o código. Agora você pode fazer quaisquer alterações no texto do site. Então é assim que as pessoas online podem confundi-lo. Então seja só um pouco de anos de custo do que você vê online. Mas tenha cuidado. Espero que o distrito tenha sido interessante. Muito obrigado.
Saujan Man Pradhan, WordPress Designer and Graphic Designer
