Ir para conteúdo
Entre para seguir isso  
Márcio Incubus

Adicionar tags pelo console do navegador

Recommended Posts

Olá pessoal, bom dia

 

Não sei se estou postando no lugar correto, pois minha dúvida é sobre comando dos consoles dos navegadores

 

Sou novo em Javascript e vi vários vídeos sobre fazer consultas no console do chrome

 

Porém precisava via console, criar por exemplo uma div em html nova ao invés de consultar as existentes

 

Também precisava via console, criar um estilo em css pra essa div em html

 

Pelo console do chrome existe como fazer esse tipo de inserção? É algum comando em Javascript? Ou nesse caso eu teria que inserir o HTML e o CSS pela aba "Elements"?

 

Abraços

Compartilhar este post


Link para o post
Compartilhar em outros sites

Não faz o menor sentido o argumento de ser mais 'profundo'

haha

Já q o console do navegador é a mesma coisa de executar a pagina no navegador (pasmem) //Não em venham com papo de VM q vou bater em vcs

 

Mas respondendo seu primeira duvida.

Se no ambiente que você está

Tiver Jquery, e estar rodando no Google Chrome por exemplo.

Só ir no console e digitar alert(1);

 

Recomendo essa serie no YT do Google.

Ele fala bastante do Console.

 

https://www.youtube.com/playlist?list=PLOU2XLYxmsILUKyjDYUVYLeq7yyTxM_3d

 

EP 4:

Compartilhar este post


Link para o post
Compartilhar em outros sites

A pergunta faz sentido e é completamente pertinente, pois alterar páginas já existentes "on the fly" é uma boa maneira de testar código css, html e javascript, de uma maneira rápida, e sem a necessidade de ide, editor de texto, e nem criação de arquivo, você cria, modifica e adiciona elementos e atributos no próprio browser, vê o resultado, e atualiza posteriormente o código de produção, caso o resultado lhe agrade.

Respondendo a pergunta:

Para acrescentar um elemento html, no chrome basta teclar F12, na guia "Elements" clicar com o botão direito no ponto do código que você deseja editar, um menu popup irá surgir, nele você clicará em Edit as html, após adicionar o elemento html, clique em qualquer ponto na tela fora do editor para sair do modo de edição, e logo em seguida selecione o elemento recém criado na própria guia "Elements", do lado direito na guia Styles aparecerá o código CSS do elemento selecionado, você pode editar o seletor element.style por exemplo e adicionar atributos para o elemento que você selecionou. Muito prático e rápido, excelente para testes e depuração.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora
Entre para seguir isso  

  • Conteúdo Similar

    • Por myknapik
      Estou iniciando a estudar HTML e PHP. E estava pensando. É possível criar um formulário em HTML, abrir no navegador e preenche lo com dados de outra aba?
      Exemplo: aba1 sempre abro com os dados do cliente. No sistema aparece em HTML em formato tabular. Na aba2 abriria um arquivo HTML com um formulário que devo preencher e imprimir com os dados da aba1. 
      É possível importar esses dados pelo PHP?
    • Por Naldinhosi
      Pessoal bom dia, peço desculpas se já existe um post referente a esse problema, caso haja me informe por gentileza  se não...
       
      Estou concluindo o desenvolvimento de um site responsive, então resolvi atualizar meus navegadores, quando entro no site fica meio desorganizado o menu superior entre outras informações, então eu retiro o zoom da página para 90% e o site fica tudo ok, gostaria de saber se alguém esta passando por isso e como resolver, ou errei em alguma coisa referente ao meu código. ficarei grato e obrigado.
    • Por BrunoJavan
      Olá, estou com um problema no mínimo curioso. Tenho uma div com ID "conteudo" e na hora de pegar essa div através do getElementById  ou até mesmo do querySelector, SEMPRE retorna null no console. O mais estranho é que se eu digito diretamente no console,  funciona normalmente. Detalhe: isso acontece tanto no Firefox quanto no Chrome.

      Segue código abaixo:
       
      <!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Relógio</title> <script> console.log( document.getElementById("conteudo") ); </script> </head> <body> <div id="conteudo">teste</div> </body> </html>  
      To até agora tentando entender pq sempre retorna null mas quando digito diretamente no console do navegador funciona. Alguém sabe me dizer que treta é essa?
    • Por marcelocardoso
      Colegas...

      Estou com este script abaixo onde já testei de tudo para resgatar o CONSOLE.LOG que vem de um arquivo asp, no CASO pegar o RESPONSE.WRITE do ASP no console.
      Segue código:

       
      <script type="text/javascript"> $(function() { $("#frm_login").validate({ errorClass: "validate-error-class", validClass: "validate-valid-class", rules: { campo_user: { required: true, minlength: 6, maxlength: 20, }, campo_pass: { required: true, minlength: 6, maxlength: 20, }, }, messages: { campo_user: { required: "Este campo é requerido", minlength: "O apelido deve conter no mínimo 6 caracteres", maxlength: "O apelido deve conter no máximo 20 caracteres" }, campo_pass: { required: "Este campo é requerido", minlength: "A senha deve conter no mínimo 6 caracteres", maxlength: "A senha deve conter no máximo 20 caracteres" }, }, submitHandler: function(form) { var formuser = $('#campo_user').val(); var formpass = $('#campo_pass').val(); $.ajax({ url: "default_login.asp?opcao=valida_login&campo_user="+formuser+"&campo_pass="+formpass, type: "post", success: function(response) { $("#retorno_erro").hide(); $("#retorno").fadeIn().html('<div id="retorno" class="text-center validate-valid-retorno" style="display: block;">'+console.log()+'</div>'); setTimeout(function() { $("#retorno").fadeOut("slow"); $(form)[0].reset(); $(location).attr('href', 'vmares_admin.asp'); }, 3000); }, error: function(response) { $("#retorno").hide(); $("#retorno_erro").fadeIn().html('<div id="retorno_erro" class="text-center validate-valid-retorno_erro" style="display: block;">'+console.log()+'</div>'); setTimeout(function() { $("#retorno_erro").fadeOut("slow"); $(form)[0].reset(); }, 3000); alert(console.log(response)); }, }); return false; } }); }); </script> Verifiquei as virgulas, fiz teste com alerts, a URL vem certinho, porém, nada.... do CONSOLE.
      Ajuda, agradeço, posso estar errando em algo...

       
    • Por Thay Andrade
      então, queria uma ajuda, se ela existir, é que estou com um código para uma apresentação de cálculo II, ele funciona "normal". Entretanto, gostaria de saber se tem alguma forma de entrar com a função que se deseja integrar direto pelo console/prompt de comando, pois toda vez que quero colocar uma nova função, tenho que adicionar ela mexendo no código...desde ja obrigada, e se coloquei algo errado por a que  é que sou nova a que e não sei como funciona, desculpa qualquer coisa. Segue o código:
       
      #include<iostream>
      #include<iomanip>
      //#include<stdlib.h>
      #include<math.h>
      #include<locale.h>
      #define PI 3.14159265
      using namespace std;
      int main(){
          setlocale(LC_ALL,"portuguese");
          cout<<"-------CÁLCULO DE ÁREA POR INTREGRAL---------\n";
          cout<<"\n---------REGRA DO PONTO MÉDIO----------\n\n";
          float a,b,n,d,x[100],v[101];
          int o,i;
          char op;
          do{
              do{
                  do{
                      cout<<"\tDigite o intervalo [a,b]:\n\n";
                      cout<<"***********************";
                      cout<<"\n\tOBS: a <= b.\n";
                      cout<<"***********************\n";
                      cout<<"a = ";
                      cin>>a;
                      cout<<"\nb = ";
                      cin>>b;
                  }while(a > b);
       cout<<"\n\nOscs[a,b] = " <<fixed <<setprecision(2)<<a<<"e" <<setprecision(2)<<b<<"Digit  ou[n]\n";
                  fflush(stdin);op = getchar(); system ("cls");
              }while(op == 'n' || op == 'N');
              
              do{
                  do{
                      cout<<"\nDIGITE O NÚMERO DE RETÂNGULOS(subintervalos) (n = 100max)?\n\n";
                      cout<<"=> ";
                      cin>>n;
                      if(n>100){
                          cout<<"Valor inválido";
                          return op;
                      }
                      }while(n<1);
          
                  cout<<"\nDigite uma das opcões de funcão que deseja resolver: \n";
                  cout<<"[1] Raiz de x";
                  cout<<"\n[2] -1/x²";
                  cout<<"\n[3] 3x² + 2";
                  cout<<"\n[4] 5*x/(5*x^4+3)^(1/4)";
                  cout<<"\n[5] (3*x² + 3*x - 6)/(x² + 2*x -3)";
                  cout<<"\n[6] sin (x*PI/180)";
                  cout<<"\n[7] cos ( x * PI / 180.0 )";
                  cout<<"\n[8] tan ( x * PI / 180.0 )";
                  cout<<"\n[9] (3x²-4)\n\n";
                  cout<<"opcão: ";
                  cin>>o;
                  if(o>9){ // verifica o numero da função digitada
                      cout<<"valor inválido";
                      return op;
                  }else if(o==0){
                      cout<<"valor inválido";
                      return op;
                  }
                  cout<<"\n\nEstá tudo correto? ( para sim e [n] para não) ";
                  fflush(stdin);
                  op = getchar();
                  system ("cls");
                  
              }while(op == 'n' || op == 'N');
              d = (b - a)/n;
              ///Cálculando as extremidades
              cout<<"\nAs extremidades são:\n";
              for(i=0;i!=n+1;i++){
                  
                  if(i==0){
                      
                      v = a;
                      cout<<fixed<<setprecision(2)<<v<<endl;
                      
                  }else if(i==n){
                      
                      v=b;
                      cout<<fixed<<setprecision(2)<<v<<endl;
                      
                  }else{
                      
                      v=v[i-1]+d;
                      cout<<fixed<<setprecision(2)<<v<<endl;
                      
                  }
              }
              //Calculando os pontos médios
              cout<<"\nOs pontos médios são:\n";
              for(i=0;i!=n;i++){
                  v=(v+v[i+1])/2;
                  cout<<fixed<<setprecision(2)<<v<<endl;
              }
              
              cout<<"\nOs pontos médios dentro da funcão resultam em:";
              //a que está o problema, toda vez tenho que adicionar mais um "case", para uma nova função.
              switch (o)
              {
                  case 1:
                  for(i=0;i!=n;i++){
                      x = sqrt((v));///raiz de x
                      cout<<fixed<<setprecision(2)<<"\nf("<<v<<")"<<setprecision(2)<<" = "<<x;
                  }
                  break;
                  case 2:
                  for(i=0;i!=n;i++){
                      x = -1/((v)*(v));///-1/(x^2)
                      cout<<fixed<<setprecision(2)<<"\nf("<<v<<")"<<setprecision(2)<<" = "<<x;
                  }
                  break;
                  case 3:
                  for(i=0;i!=n;i++){
                      x = 3*(v*v)+2;///3x^2+2
                      cout<<fixed<<setprecision(2)<<"\nf("<<v<<")"<<setprecision(2)<<" = "<<x;
                  }
                  break;
          
                  case 4:
                  for(i=0;i!=n;i++){
                      x = 5*v/pow(((pow(5*v,4))+3),(1/4));/// 5*x/(5*x^4+3)^(1/4)
                      cout<<fixed<<setprecision(2)<<"\nf("<<v<<")"<<setprecision(2)<<" = "<<x;
                  }
                  break;
                  
                  case 5:
                  for(i=0;i!=n;i++){
                      x = ((3*(pow(v,2)))+(3*v)-6)/((pow(v,2))+(2*v)-3);/// (3*x^2 + 3*x - 6)/(x^2 + 2*x -3)
                      cout<<fixed<<setprecision(2)<<"\nf("<<v<<")"<<setprecision(2)<<" = "<<x;
                  }break;
                  
                  case 6:
                  for(i=0;i!=n;i++){
                      x = sin((v*PI)/180) ;/// sin (x*PI/180)
                      cout<<fixed<<setprecision(2)<<"\nf("<<v<<")"<<setprecision(2)<<" = "<<x;
                  }break;
                  case 7:
                      for(i=0;i!=n;i++){
                      x = cos ((v*PI)/180.0) ;/// cos ( x * PI / 180.0 )
                      cout<<fixed<<setprecision(2)<<"\nf("<<v<<")"<<setprecision(2)<<" = "<<x;
                  }break;
                  case 8:
                      for(i=0;i!=n;i++){
                      x = tan ((v*PI)/180.0) ;/// tan ( x * PI / 180.0 )
                      cout<<fixed<<setprecision(2)<<"\nf("<<v<<")"<<setprecision(2)<<" = "<<x;
                  }break;
                  
                  case 9:
                      for(i=0;i!=n;i++){
                      x = ((3*(pow(v,2)))-4) ;///(3x^2-4)
                      cout<<fixed<<setprecision(2)<<"\nf("<<v<<")"<<setprecision(2)<<" = "<<x;
                  }break;
                  default:
                  cout<<"opcão = ?"<<o;
              }
              
              ///Cálculando a soma dos resultados da função e exibindo na tela
              for(i=1;i!=n;i++){
                  x = x + x[i-1];
                  if(i==n-1){
                      x = d*(x);
                      cout<<"\n\nO resultado da Integral é: "<<fixed<<setprecision(2)<<x;
                  }
              }
                  
              cout<<"\n\nDeseja fazer outra integral? ( para Sim e [n] para Não) ";
              fflush(stdin);
           op = getchar(); 
           system ("cls");
          }while(op == 's' || op == 'S');
          system("pause");
          return 0;
      }
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.