como depurar o js no jsfiddle


95

Estou olhando este jsfiddle: http://jsfiddle.net/carpasse/mcVfK/ Funciona bem esse não é o problema, só quero saber como depurar através do javascript. Tentei usar o comando debugger e não consigo encontrá-lo na guia de fontes? alguma ideia de como posso depurar isso?

algum código do violino:

angular.module('app', ['appServices'])
    .config(['$routeProvider', function($routeProvider) {
        $routeProvider.
                when('/home', {templateUrl: 'home.html',   controller: HomeCtrl}).
                when('/list', {templateUrl: 'list.html',   controller: ListCtrl}).
                when('/detail/:itemId', {templateUrl: 'detail.html',   controller: DetailCtrl}).
                when('/settings', {templateUrl: 'settings.html',   controller: SettingsCtrl}).
                otherwise({redirectTo: '/home'});
}]);

1
Insira a palavra debugger;no código. O Chrome e o Firefox abrirão automaticamente um depurador passo a passo! (Copiei esta dica da resposta de @ user3335908 para torná-la mais proeminente)
Will Sheppard

Respostas:


53

O JavaScript é executado a partir da pasta fiddle.jshell.net da guia Fontes do Chrome. Você pode adicionar pontos de interrupção ao arquivo de índice mostrado na captura de tela do Chrome abaixo.

Depurando JSFiddle no Chrome

insira a descrição da imagem aqui


9
isso não mostra nada para mim. Recebo um arquivo de índice vazio
Oliver Watkins

1
@OliverWatkins estava vazio para mim também, resolvi isso clicando em "Atualizar" na parte superior, então percebi, depois de executar novamente, na guia Fontes no painel de ferramentas de desenvolvedores, em "jsfiddle.net" e, em seguida, em minha pasta nomeada , havia um diretório extra com outro arquivo de índice que mostrava o código. Espero que isto ajude!
MilesMorales

Eu tenho uma terceira pasta em fiddle.jshell.net que tem (índice) também. Se eu abrir, há um arquivo html com o js embutido nele. (na linha 48 quando escrevi isto)
John MacIntyre

fiddle.jshell.netcontém apenas _displaycom (index)dentro, que é uma página HTML quase vazia com <p>That page doesn't exist.</p>. Meu código js não está lá
CygnusX1

35

Use a debugger;instrução no código. O navegador insere um ponto de interrupção nesta instrução e você pode continuar no depurador do navegador.

Isso deve funcionar pelo menos em cromo e firefox. https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/debugger

angular.module('app', ['appServices'])
.config(['$routeProvider', function($routeProvider) {
    // *** Debugger invoked here
    debugger;
    $routeProvider.
            when('/home', {templateUrl: 'home.html',   controller: HomeCtrl}).
            when('/list', {templateUrl: 'list.html',   controller: ListCtrl}).
            when('/detail/:itemId', {templateUrl: 'detail.html',   controller: DetailCtrl}).
            when('/settings', {templateUrl: 'settings.html',   controller: SettingsCtrl}).
            otherwise({redirectTo: '/home'});
}]);

Esta é a melhor resposta !
vibs2006

6

Algo que vale a pena mencionar. Se você estiver usando ferramentas de desenvolvimento do Chrome. Pressione ctrl+ shift+ Fe você pode pesquisar todos os arquivos na fonte.


2
Isso é muito útil, no Mac é Cmd + Alt + F
John W. Clark

Essa seria uma resposta muito melhor, mas os pontos de interrupção definidos no código que você encontrar dessa forma não serão respeitados.
Slbox

Graças a esta dica, consegui encontrar o código em um arquivo que não está aparecendo na árvore de origem ...
GarfieldKlon

3

Além das outras respostas.

Muitas vezes, é útil apenas gravar informações de depuração no console:

console.log("debug information here");

A saída está disponível no console de ferramentas de desenvolvimento do navegador. Como se fosse registrado a partir do código javascript usual.
Isso é bastante simples e eficaz.


3

Adicionar uma instrução de depurador no código e habilitar as "Ferramentas de desenvolvedor" no bowser. Então, quando você estiver executando o código no JSFiddle, o depurador será atingido !.


0

Aqui está outro lugar :)

Sob o Jsfiddle.netnó.

insira a descrição da imagem aqui


Este parece cointain o código-fonte que é mostrado na página, cercado com <pre>... </pre>. Não é um código executável real.
CygnusX1

Você não pode depurar este código. Uma dica de que você não pode é a falta de destaque ...
GarfieldKlon

0

O JavaScript é executado a partir do arquivo ?editor_console=truena pasta result (fiddle.jshell.net)/fiddle.jshell.net/_displaypasta da guia Fontes do Chrome ao usar a ferramenta de desenvolvedor. Você pode adicionar pontos de interrupção ao seu código e atualizar a página. insira a descrição da imagem aqui

Mais informações sobre como usar o depurador do Chrome podem ser encontradas em Tentando depurar Javascript no Chrome

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.