Debug Chrome on iOS (Tracer Method)

debug-chrome-on-ios.js

...
// Add this to your app.js


// Listen for console.x events on the front end, and print them in our logging
app.get('/console/:type', (req, res) => {
  console[req.params.type](`[REMOTE: console.${req.params.type}]`, req.query)
  res.end()
});

...

first-thing-sourced.js

// Put at top of one of the very first files sourced in your web app
(() => {
  const log = window.console.log;
  const warn = window.console.warn;
  const error = window.console.error;

  window.console.log = (...args) => {
    let query = args.map(x => JSON.stringify(x)).map((x, i) => encodeURI(`${i}=${x}`)).join('&')
    window.fetch('/console/log?' + query)
    return log(...args)
  }
  window.console.warn = (...args) => {
    let query = args.map(x => JSON.stringify(x)).map((x, i) => encodeURI(`${i}=${x}`)).join('&')
    window.fetch('/console/warn?' + query)
    return warn(...args)
  }
  window.console.warn = (...args) => {
    let query = args.map(x => JSON.stringify(x)).map((x, i) => encodeURI(`${i}=${x}`)).join('&')
    window.fetch('/console/warn?' + query)
    return warn(...args)
  }
})()

..

There are a number of Chrome debugging tools out there, but frankly I could not get any of them to work. I decided that it was not worth my time setting up tools anymore, so I settled on the time proven classic method of Tracer Debugging. I waisted 2 hours of my time trying to set up my environment to debug Chrome on iOS, but with this tracer method, I found a solution in 10 min.

Good luck. Remember not to commit this code to your production environment, since it will each up a lot of bandwidth.