Отладка исходных файлов с помощью расширения chrome

Я пытаюсь управлять отладчиком с помощью расширения Chrome.

Я использую devtools-протокол и расширение chrome документация, но я понятия не имею, как их реализовать, поскольку я не видел никаких образцов используемых методов. Я использовал расширение образца из здесь, который показывает, как приостановить и возобновить только отладчик, но это абсолютно бесполезно для меня. Я попытался реализовать некоторые методы в образце, но ничего происходит.

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

проблема в том, что файл js, который я пытаюсь отладить, загружается с веб-сайта внутри вкладки "источники", и он огромен, мы говорим о 150k+ строках после его форматирования, и для загрузки требуется некоторое время.

теперь кто-нибудь может сказать мне, как просто добавить точку останова внутри файла js из источников (используя расширение CHROME), чтобы он мог быть запущен при действии, которое затем остановит отладчик, чтобы я мог изменить значения и т. д.?

9
google-chrome-extension javascript

5 ответов

возможно, вы размещаете неправильное местоположение точки останова (отформатированный источник), попробуйте работать с исходным кодом и добавьте columnNumber: integer

и вот рабочая версия JavaScript pause/resume -> background.js:

код:

// 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"
  });
}

демо

debugger extension demo

1

EDIT: просто увидел ваш комментарий об этом для пользовательского расширения, которое вы пишете. Мой ответ не поможет вам (извините!), но это может помочь людям, которые приходят сюда в поисках пути установления нормального останова в Chrome.

может быть, вы уже сделали, но... Вы пробовали просто щелкнуть номер строки строки, в которой вы хотите установить точку останова?

такой:

вы даже можете включить или отключить точки останова в несколько разных звонков по одной линии.

при загрузке страницы откройте Dev Tools с помощью F12, затем перейдите к файлу JS на панели "источники" и добавьте нужные точки останова. Затем обновите страницу, чтобы загрузить ее снова-Chrome запомнит, где вы установили точки останова, и остановится на них.

1

Если вы можете изменить исходный код файла, который вы хотите отладить, я бы посмотрел, используйте оператор debugger.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger

function potentiallyBuggyCode() {
    debugger;  //application will break here as long as chrome developer tools are open
}
0
function breakhere() {
    debugger;
}
0

ok, для начала вам нужно отправить команду Debugger.enable .. что-то вроде этого:--5--> 

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);
});

тогда внутри вас onEvent вы можете установить точки разрыва

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

я настоятельно рекомендую проверить раздел обнюхивания на этой странице:https://chromedevtools.github.io/devtools-protocol/ потому что я смог увидеть json, который возвращается по протоколу WS, и это поможет вам сделать почти все, что вы хотите.. Я не могу построить тебе полное расширение, ты ... на своего человека,,

Я думаю, что вам нужно добавить somekind DOM elemnet со списком скриптов, которые вы будете анализировать из Network.getResponseBody а затем somekind инструмента UX, чтобы выбрать эти скрипты и позволить пользователям отлаживать, этот процесс может занять некоторое время : (

надеюсь, что я направил вас в правильном направлении, удачи!

0