Detect use of browser DevTools

[mgorenstein]

Participants can use in-browser debugging functionality to view or modify task data. For instance, the 'correct response button' or 'correct answer' might be stored in a task trial object available on the client-side. Given recent worries about data quality on e.g. MTurk, detecting attempts to use browser debugging tools could provide experimenters with an additional indicator of suspicious activity.

I've done a bit of digging into existing detection methods, and it seems that, while no definitive cross-browser solution currently exists, a useful heuristic is to detect sudden changes in the difference between window.outerWidth/Height and window.innerWidth/Height properties, which occur whenever an in-browser toolbar is opened. One major limitation of this approach is that DevTools consoles can be set to open in a separate window, which would not be detected.

One popular implementation of that method is available in the devtools-detect repo. For those interested, I include a snippet below that adds a listener for the devtoolschange events in devtools-detect and pushes them into jsPsych's InteractionData object.

window.addEventListener('devtoolschange', event => {
  var change = {'event': 'devtools',
                'trial': jsPsych.progress().current_trial_global,
                'time': jsPsych.totalTime(),
                'open': event.detail.isOpen ? 'yes' : 'no',
                'orientation': event.detail.orientation};
  jsPsych.data.getInteractionData().push(change);
});