Javascript Onclick Does Not Fire When Developer Tools Are Open

I recently ran into an issue where the onclick event of an HTML button was not firing when the developer tools in the browser were open, but it did fire when the tools were closed:

Solution 1:

There were two interrelated causes of this issue:

1. The fundamental reason for the behavior of it working with dev tools open and not working when dev tools were closes was related to window size. The bug manifested itself when the window got narrow enough.

   • Since I had the dev tools docked to the right side of the window in all my browsers, when I opened them they narrowed the window enough to make the bug appear. When I closed the dev tools the window got wider and the bug vanished.
   • The reason it was inconsistent in Safari on the iPad was that it depended upon how the user was holding the iPad. If he or she was holding in landscape mode then the screen was wider and the bug did not show. If he or she was holding it in portrait mode then the screen got narrow enough to make the bug visible.

2. The actual error in the code was related to use of Bootstrap. This button was part of a Bootstrap layout. The previous developer who implemented this had accidentally nested a <div class="row"> inside a <div class="col-xs-12"> instead of the other way around. When I put the column inside the row, the bug went away.