Give me your favorite debugging tools, tips, tricks, etc

chad
chad Dailynista
edited August 2022 in Discussion πŸ’¬

What's your favorite way to figure out "what's going on" with a particular webrtc connection? I primarily use chrome://webrtc-internals, but I understand maybe 10% of what's happening there. Most of the time I click around until I find a set of graphs that seem to correspond to the connection I'm curious about. From there I can often determine things like video track resolution and frame rate. I also know there's the getStats() function on a peer connection: https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/getStats

What are your most useful in-the-moment tools? Certain parts of webrtc-internals that I don't know about? Cool JS console tricks with the connection object?

Comments

  • vipyne
    vipyne Dailynista
    edited July 2022

    In Safari, I like to turn on WebRTC logging:


  • kwindla
    kwindla Dailynista

    Sometimes it's useful to dig into how a WebRTC application works that you don't have the source code to. In that case, it can be useful to monkey patch some of the core JavaScript objects. If you can do that early enough, you can add debug output and get references to all RTCPeerConnection objects, media tracks, and other interesting internals.

    I have a bunch of snippets that I can copy into the JavaScript console that look something like this:

    let stockPeerConnection = window.RTCPeerConnection; let monkeyedPeerConnection = function(config, constraints) { let pc = new stockPeerConnection(config, constraints); console.warn("CREATED PeerConnection", pc); return pc; }; window.RTCPeerConnection = monkeyedPeerConnection;

    For a production-quality example of this approach, here's the source code to the Callstats Vonage shim library, by WebRTC.Ventures.

  • jameshush
    jameshush Dailynista

    All these comments are gold! I'm a big fan of pouring a cup of coffee, turning off all notifications, throwing my phone in another room, and stepping through the code line by line with a debugger.

    I found it's much faster to find the solution to a problem if I SLOW DOWN than if I just throw random code on top of broken code.

    Using the VS Code debugger is great too (https://blogs.windows.com/msedgedev/2021/07/16/easier-debugging-developer-tools-in-visual-studio-code/). It's much easier to set up nowadays, even for a webpack-y typescript filled project. For Javascript in an HTML file, there's no setup.

  • Lazer
    Lazer Dailynista

    `console.log()` is love. `console.log()` is life.

  • filipi
    filipi Dailynista

    Not exclusive for webrtc, but, on react native we don't have the local storage, so a really small hack sometimes is needed in order to see all logs that are printed by the libraries. =)

    // Enable debug logs
    window.localStorage = window.localStorage || {};
    window.localStorage.debug = '*';
    window.localStorage.getItem = (itemName) => {
      console.log('Requesting the localStorage item ', itemName);
      return window.localStorage[itemName];
    };