Gamepad - Chrome DevTools integration

ps4devtools.js

(function(){

let gamepad = null;
let loopInterval = null;

window.addEventListener("gamepadconnected", connectHandler);
window.addEventListener("gamepaddisconnected", disconnectHandler);

function connectHandler(e) {
  if (!gamepad) {
    addGamepad(e.gamepad);
  }
}

function disconnectHandler(e) {
  if(gamepad) {
    removeGamepad(e.gamepad);
  }
}

function addGamepad(newGamepad) {
  console.log('connected', newGamepad);
  gamepad = newGamepad;
  loopInterval = setInterval(() => {
    updateStatus();
    gameLoop();
  }, 50);
}

function removeGamepad(removeGamepad) {
  console.log('disconnected', removeGamepad);
  gamepad = null;
  clearInterval(loopInterval);
}

function updateStatus() {
  if(!gamepad) {
    return;
  }

  scanGamepads();
}

function scanGamepads() {
  var gamepads = navigator.getGamepads();
  for (var i = 0; i < gamepads.length; i++) {
    if (gamepads[i] && gamepad.index === gamepads[i].index){
      gamepad = gamepads[i];
    }
  }
}

const tree = UI.panels.elements._treeOutlines[0];
let currentPropertyIdx = 0;

function gameLoop() {
  if (leftJoystickLeft()) {
   tree.selectedTreeElement.collapseOrAscend(false);
   currentPropertyIdx = 0;
  }
  if (leftJoystickRight()) {
   if (!tree.selectedTreeElement.revealed()) {
    tree.selectedTreeElement.reveal();
   } else {
    tree.selectedTreeElement.descendOrExpand(false);
   }
   currentPropertyIdx = 0;
  }
  if (leftJoystickTop()) {
    tree.selectPrevious();
    currentPropertyIdx = 0;
  }
  if (leftJoystickBottom()) {
    tree.selectNext();
    currentPropertyIdx = 0;
  }

  if (buttonX()) {
    tree.selectedTreeElement._node.removeNode();
  }
}

const leftJoystickLeft = () => gamepad && gamepad.axes[0] === -1;
const leftJoystickRight = () => gamepad && gamepad.axes[0] === 1;
const leftJoystickTop = () => gamepad && gamepad.axes[1] === -1;
const leftJoystickBottom = () => gamepad && gamepad.axes[1] === 1;

const buttonX = () => gamepad && gamepad.buttons[0].pressed;

})();

Supports traversing the DOM and removing nodes via Elements panel.

Preview: https://twitter.com/kdzwinel/status/916817293711216640

How to run it? Make sure you have Elements tab open. Do "DevTools inception" and inject above script to DevTools.

Tested on PS3 controller and MacOS.