Usando JS no Console do Browser

Aqui está um passo-a-passo para acessar o console do navegador em diferentes navegadores populares:

Google Chrome:

1. Abra o navegador Google Chrome.
2. Navegue até a página que deseja inspecionar.
3. Clique com o botão direito em qualquer lugar na página e selecione “Inspecionar” no menu contextual. Ou você também pode usar o atalho de teclado “Ctrl + Shift + I” (Windows/Linux) ou “Command + Option + I” (Mac).
4. Isso abrirá o painel de desenvolvedor. Na parte superior do painel, você encontrará uma guia chamada “Console”. Clique nessa guia para abrir o console do navegador.

Mozilla Firefox:

1. Abra o navegador Mozilla Firefox.
2. Navegue até a página que deseja inspecionar.
3. Clique com o botão direito em qualquer lugar na página e selecione “Inspecionar Elemento” no menu contextual. Ou você também pode usar o atalho de teclado “Ctrl + Shift + I” (Windows/Linux) ou “Command + Option + I” (Mac).
4. Isso abrirá o painel de desenvolvedor. Na parte superior do painel, você encontrará uma guia chamada “Console”. Clique nessa guia para abrir o console do navegador.

Microsoft Edge:

1. Abra o navegador Microsoft Edge.
2. Navegue até a página que deseja inspecionar.
3. Clique com o botão direito em qualquer lugar na página e selecione “Inspecionar elemento” no menu contextual. Ou você também pode usar o atalho de teclado “Ctrl + Shift + I” (Windows/Linux) ou “Command + Option + I” (Mac).
4. Isso abrirá o painel de desenvolvedor. Na parte superior do painel, você encontrará uma guia chamada “Console”. Clique nessa guia para abrir o console do navegador.

Safari:

1. Abra o navegador Safari.
2. No menu superior do Safari, clique em “Safari” e selecione “Preferências”.
3. Na janela de preferências, clique na guia “Avançado”.
4. Marque a opção “Mostrar menu ‘Desenvolver’ na barra de menus”.
5. Agora você verá uma nova opção “Desenvolver” na barra de menus do Safari.
6. Navegue até a página que deseja inspecionar.
7. Clique em “Desenvolver” na barra de menus e selecione “Mostrar Console JavaScript”.
8. Isso abrirá o console do navegador.

Com o console do navegador aberto, você pode executar comandos JavaScript, exibir mensagens de depuração, testar expressões e muito mais. Ele é uma ferramenta valiosa para desenvolvimento e depuração de código.

JS no Console – Alterar a cor de fundo

document.body.style.background = 'black';

O código document.body.style.background = 'black'; é usado para alterar o estilo de fundo do elemento body para preto.

Essa linha de código acessa a propriedade style do elemento body do documento e, em seguida, define a propriedade background com o valor 'black', que representa a cor preta.

Dessa forma, ao executar esse código em um ambiente JavaScript em um navegador, o fundo da página será alterado para preto.

JS no Console – Alterar a escala de cor do elemento

document.querySelector('...').style.filter = 'grayscale(100%)';

Nesse código, o document.querySelector('...') é usado para selecionar um elemento no DOM usando um seletor CSS válido (F12 para abrir o inspetor e Ctrl+Shift+C para selecionar um elemento). Você precisa substituir '...' pelo seletor correto para o elemento que você deseja selecionar. Por exemplo, se você deseja selecionar um elemento com um determinado ID, você pode usar '#id' como seletor, onde 'id' é o ID do elemento.

Uma vez que o elemento é selecionado, style.filter é usado para definir a propriedade CSS filter desse elemento. No exemplo acima, a propriedade filter é definida como 'grayscale(100%)', que aplica um filtro de escala de cinza de 100% ao elemento, tornando-o totalmente em preto e branco.

JS no Console – Alterar a visibilidade do elemento

O código document.querySelector('img.lnXdpd').style.visibility = 'hidden'; é usado para selecionar um elemento de imagem (tag <img>) no DOM usando o método querySelector e modificar sua propriedade de estilo visibility para ‘hidden’, tornando-o invisível.

Vamos analisar cada parte do código:

• document.querySelector('img.lnXdpd'): O método querySelector é usado para selecionar o primeiro elemento correspondente a um seletor CSS especificado. Neste caso, estamos procurando um elemento de imagem <img> com a classe lnXdpd. Você pode substituir 'img.lnXdpd' pelo seletor adequado ao elemento que você deseja selecionar.
• .style.visibility = 'hidden': Uma vez que o elemento é selecionado, a propriedade style.visibility é usada para controlar a visibilidade do elemento. Atribuir o valor 'hidden' a essa propriedade torna o elemento invisível. O valor 'hidden' faz com que o elemento não seja renderizado no layout, ocupando espaço zero na página.

Portanto, ao executar esse código, o elemento de imagem selecionado terá sua visibilidade alterada para “hidden” e não será mais exibido na página.

JS no Console – Alterar o texto do elemento

O código document.querySelector('tag de texto').innerText = 'novo conteúdo do elemento aqui...'; é usado para selecionar um elemento no DOM usando o método querySelector e modificar o seu conteúdo de texto usando a propriedade innerText.

Vamos analisar cada parte do código:

• document.querySelector('tag de texto'): O método querySelector é usado para selecionar o primeiro elemento correspondente a um seletor CSS especificado. Neste caso, estamos procurando um elemento específico que seja uma “tag de texto”. Você precisa substituir 'tag de texto' pelo seletor correto para o elemento que você deseja selecionar.
• .innerText = 'novo conteúdo do elemento aqui...': Uma vez que o elemento é selecionado, a propriedade innerText é usada para definir o conteúdo de texto desse elemento. Atribuir uma nova string, como 'novo conteúdo do elemento aqui...', a essa propriedade substituirá o conteúdo anterior pelo novo conteúdo especificado.

Portanto, ao executar esse código, o elemento selecionado terá seu conteúdo de texto alterado para o novo valor especificado. Isso é útil quando você deseja atualizar dinamicamente o texto exibido em um elemento específico na página.

Manipular conteúdo do Google

Acesse: https://www.google.com/

document.querySelector('img.lnXdpd').style.filter = 'grayscale(100%)';

document.body.style.background = 'black';

document.querySelector('img.lnXdpd').style.visibility = 'hidden';