5

Explicando meu cenário, utilizo emberjs, e ele encapsula cada Component dentro de um Controller que vai ser encapsulado dentro de um Router, e ainda possui um esquema de Model, Mixins, Helpers, isso quando não existe um componente, ou addon, ou mixin conversando com outro componente, addon, mixin (bem vindo ao javascript moderno).... As vezes fica bem difícil de debugar o código, saber o caminho da rota do javascript, o escopo em que tal função ou método foi chamado, usando o console.debug(); eu consigo pegar o escopo atual da função, mas fica difícil saber aonde aquela função foi chamada. Existe algum método ou modo em javascript de descobrir todo o caminho que a função percorreu até chegar em determinado ponto?

Exemplificando:

function A(){
  B();
}

function B(){
  a.teste();
}

function C(){
  /*Descobrir como o javascript chegou até aqui*/
  console.log("Hellor Weird World!");
  console.debug();
}

var a = {
  teste: function(){
    C();
  }
}

A();

2
  • 2
    Isso seria muito util, eu faço via inspetor de elementos, claro que ele já tem que estar aberto antes da função executar, mas o grande problema é quando usam .call ou .apply, como jQuery faz, ai fica quase impossivel encontrar :/ (sei lá porque)
    – Syzoth
    Commented 15/08/2018 às 15:45
  • 1
    Uma forma estranha, mas que funciona é console.log(new Error().stack);, que é basicamente o sugerido nesta resposta no SOen
    – Isac
    Commented 15/08/2018 às 15:50

1 Resposta 1

2

Existe sim um modo de descobrir quem chamou a função, através da variável local arguments. Vale ressaltar que esse método somente funciona se você não estiver usando strict mode, ou seja, o arquivo não pode conter 'use strict';

Exemplo:

function Hello()
{
    alert("O nome da função que chamou é " + arguments.callee.caller.name);
}

function Main() {
    Hello();
}

Main();

Essa execução irá mostrar no alert "O nome da função que chamou é Main".

Porém, você precisa rastrear o caminho completo e não somente o último "caller". Nesse caso teríamos que recursivamente captar os callers, até que sejam nulos. A lógica seria algo similar a isso:

function Hello()
{
    rastrear();
}

function Main() {
    Hello();
}

function Main2() {
    Main();
}

function rastrear() {
    var trace = '';
    var haveTrace = true;

    var caller = arguments.callee.caller;

    trace = caller.name + ' -> ';

    while(haveTrace) {
        if(caller.caller) {
            trace = caller.caller.name + ' -> ' + trace;
            caller = caller.caller;
        } else {
            haveTrace = false;
        }
    }

    console.log(trace);
}

Main2();

Isso irá imprimir no console o resultado "Main2 -> Main -> Hello -> ". Mas atenção! Utilizar essa função em funções recursivas pode causar um looping infinito!


Uma outra ótima opção seria usar a função console.trace();. Nesse caso seria algo assim:

function Hello()
{
    console.trace();
}

function Main() {
    Hello();
}

function Main2() {
    Main();
}

Main2();

Isso irá resultar em algo assim no console:

console.trace
Hello @ VM197:3
Main @ VM197:7
Main2 @ VM197:11

Além disso ainda existem outras possibilidades programáveis, mas já é um ótimo ponto de partida.

2
  • para usar o rastrear() eu iria ter que declarar a função dentro do meu sistema, correto? Será que funcionaria bem com múltiplos arquivos js que conversam entre si em um mesmo projeto? Achei bacana o console.trace()! Não conhecia =) Commented 15/08/2018 às 17:03
  • Funciona sim. Porém no seu caso, em um framework, muita coisa acontece por trás dos panos. Pode ser que ele acabe "rastreando", execuções de funções de classes ancestrais como Controller, Component, Router e etc... tem esse fator. Sobre o console.trace(), realmente é uma ótima opção, e eventualmente deve cair na situação que citei do rastreamento também. Commented 15/08/2018 às 17:25

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .