wosephjeber

Inspecting Chrome extension interfaces with React DevTools

Chrome does not allow extensions to modify other extensions, so React DevTools are not available in the Chrome DevTools interface when inspecting a Chrome extension interface. The React team has provided a standalone app that can be connected manually, but it requires some setup. The React DevTools readme includes some instructions, but they leave out an important step if you're debugging within a Chrome extension.

Here's an overview of how to set this up locally for an extension:

Run the standalone React DevTools app

The easiest way to start the standalone app is:

wosephjeber

export default async function waitFor(callback, { timeout = 1000 } = {}) {
  let intervalTimer;
  let lastError = null;
  let pending = false;
  let timeoutTimer;

  return new Promise((resolve, reject) => {
    function onDone(result) {
      clearInterval(intervalTimer);
      clearTimeout(timeoutTimer);

wosephjeber

const { execSync } = require('child_process');

function executeGitCommand(command) {
  return execSync(command)
    .toString('utf8')
    .replace(/[\n\r\s]+$/, '');
}

const BRANCH = executeGitCommand('git rev-parse --abbrev-ref HEAD');
const COMMIT_SHA = executeGitCommand('git rev-parse HEAD');

wosephjeber

Installing ngrok on OSX

For Homebrew v2.6.x and below:

brew cask install ngrok

For Homebrew v2.7.x and above:

wosephjeber

Renaming table in Ecto migration

I recently wanted to rename a model and its postgres table in a Phoenix app. Renaming the table was simple and documented, but the table also had constraints, sequences, and indexes that needed to be updated in order for the Ecto model to be able to rely on default naming conventions. I couldn't find any examples of what this would look like but was eventually able to figure it out. For anyone else in the same situation, hopefully this example helps.

In the example below, I'm renaming the Permission model to Membership. This model belongs to a User and an Account, so it has foreign key constraints that need to be renamed.

defmodule MyApp.Repo.Migrations.RenamePermissionsToMemberships do
  use Ecto.Migration