Depurando arquivos fonte usando a extensão chrome

9

Estou tentando controlar o depurador usando a extensão do Chrome.

Estou usando devtools-protocol e chrome extension , mas não tenho ideia de como implementá-las, já que não vi nenhuma amostra dos métodos em uso. Eu usei a extensão de amostra de aqui que mostra como pausar e retomar o depurador apenas, mas isso não é verdade use para mim. Tentei implementar alguns métodos na amostra, mas nada acontece.

function onDebuggerEnabled(debuggeeId) {
  chrome.debugger.sendCommand(debuggeeId, "Debugger.setBreakpointByUrl", {
        lineNumber: 45825,
        url: 'full https link to the js file from source tab'
  });
}

O problema é que o arquivo js que estou tentando depurar é carregado do site dentro da guia de fontes e é enorme, estamos falando de 150k + linhas depois que ele foi formatado e leva algum tempo para carregar.

Agora alguém pode me dizer como simplesmente adicionar um ponto de interrupção dentro do arquivo js das fontes (USANDO CHROME EXTENSION) para que ele possa ser acionado em uma ação que interromperá o depurador para que eu possa alterar os valores, etc.?

    
por AlwaysConfused 28.05.2017 в 21:15
fonte

5 respostas

1

Talvez você esteja colocando o local errado do ponto de interrupção (fonte formatada), tente trabalhar com a fonte original e adicione columnNumber: integer

e aqui trabalhando versão JavaScript pause/resume -> background.js :

  • instale esta extensão
  • abra o link
  • clique no botão de pausa do depurador
  • clique no botão "Depurar-me!"
  • atingirá o ponto de interrupção no link na linha 10
  • clique no botão continuar do depurador, você verá a variável de mensagem "sequestrada ..."

o código:

// Copyright (c) 2011 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
// mod by ewwink

var attachedTabs = {};
var version = "1.1";

chrome.debugger.onEvent.addListener(onEvent);
chrome.debugger.onDetach.addListener(onDetach);

chrome.browserAction.onClicked.addListener(function(tab) {
  var tabId = tab.id;
  var debuggeeId = {
    tabId: tabId
  };

  if (attachedTabs[tabId] == "pausing")
    return;

  if (!attachedTabs[tabId])
    chrome.debugger.attach(debuggeeId, version, onAttach.bind(null, debuggeeId));
  else if (attachedTabs[tabId])
    chrome.debugger.detach(debuggeeId, onDetach.bind(null, debuggeeId));
});

function onAttach(debuggeeId) {
  if (chrome.runtime.lastError) {
    alert(chrome.runtime.lastError.message);
    return;
  }

  var tabId = debuggeeId.tabId;
  chrome.browserAction.setIcon({
    tabId: tabId,
    path: "debuggerPausing.png"
  });
  chrome.browserAction.setTitle({
    tabId: tabId,
    title: "Pausing JavaScript"
  });
  attachedTabs[tabId] = "pausing";
  chrome.debugger.sendCommand(
    debuggeeId, "Debugger.enable", {},
    onDebuggerEnabled.bind(null, debuggeeId));
}

function onDebuggerEnabled(debuggeeId) {
  chrome.debugger.sendCommand(debuggeeId, "Debugger.setBreakpointByUrl", {
    lineNumber: 10,
    url: 'https://ewwink.github.io/demo/script.js'
  });
}

function onEvent(debuggeeId, method, params) {
  var tabId = debuggeeId.tabId;
  if (method == "Debugger.paused") {
    attachedTabs[tabId] = "paused";
    var frameId = params.callFrames[0].callFrameId;
    chrome.browserAction.setIcon({
      tabId: tabId,
      path: "debuggerContinue.png"
    });
    chrome.browserAction.setTitle({
      tabId: tabId,
      title: "Resume JavaScript"
    });
    chrome.debugger.sendCommand(debuggeeId, "Debugger.setVariableValue", {
      scopeNumber: 0,
      variableName: "changeMe",
      newValue: {
        value: 'hijacked by Extension'
      },
      callFrameId: frameId
    });
  }
}

function onDetach(debuggeeId) {
  var tabId = debuggeeId.tabId;
  delete attachedTabs[tabId];
  chrome.browserAction.setIcon({
    tabId: tabId,
    path: "debuggerPause.png"
  });
  chrome.browserAction.setTitle({
    tabId: tabId,
    title: "Pause JavaScript"
  });
}

demo

    
por uingtea 06.06.2017 / 23:09
fonte
1

EDIT: Acabei de ver o seu comentário sobre isso para uma extensão personalizada que você está escrevendo. Minha resposta não ajudará você (desculpe!), Mas pode ajudar as pessoas que vêm aqui procurando uma maneira de definir pontos de interrupção normais no Chrome.

Talvez você já tenha feito isso, mas ... Já tentou clicar no número da linha na qual deseja definir o ponto de interrupção?

Assim:

Você pode até ativar ou desativar os pontos de interrupção em várias chamadas diferentes na mesma linha.

Quando a página for carregada, abra Dev Tools with F12, navegue até o arquivo JS no painel Origens e adicione os pontos de interrupção desejados. Em seguida, atualize a página para carregá-la novamente. O Chrome lembrará onde você definiu os pontos de interrupção e parará neles.

    
por Luis G. 06.06.2017 / 15:29
fonte
0

Se você puder modificar o código-fonte do arquivo que deseja depurar, eu procuraria usar a instrução do depurador.

link

function potentiallyBuggyCode() {
    debugger;  //application will break here as long as chrome developer tools are open
}
    
por Nick Painter 02.06.2017 / 15:57
fonte
0
function breakhere() {
    debugger;
}
    
por Daniel Taub 06.06.2017 / 21:15
fonte
0

ok, para começar você tem que enviar o comando Debugger.enable . algo como isto:

var tabId = parseInt(window.location.search.substring(1));

window.addEventListener("load", function() {
  chrome.debugger.sendCommand({tabId:tabId}, "Debugger.enable");
  chrome.debugger.attach( tabId, "0.1" );
  chrome.debugger.onEvent.addListener(onEvent);
});

então dentro de você onEvent você pode definir pontos de quebra

function onEvent(debuggeeId, message, params) {
  if (tabId != debuggeeId.tabId) return;
  var res = Debugger.setBreakpointByUrl( 2, 'url-of-the-script-file' );
}

Sugiro vivamente que consulte a secção de sniffing nesta página: link porque pude ver o json que são retornados via protocolo WS e que o ajudarão a fazer praticamente qualquer coisa que você quiser. Eu não posso construir sua extensão completa, você está no seu próprio homem,

Eu acho que você precisa adicionar alguma espécie de DOM elemnet com uma lista de scripts que você irá analisar a partir de Network.getResponseBody e então alguma espécie de ferramenta UX para escolher esses scripts e permitir que os usuários depurem, esse processo pode levar alguns tempo: (

espero ter guiado você na direção certa, boa sorte!

    
por Kresimir Pendic 07.06.2017 / 11:58
fonte