How can I get an event listener in DevTools when creating jQuery alias?

62 Views Asked by At

I can't get an event listener in Chrome DevTools and Firefox DevTools when creating a different alias instead of jQuery to use jQuery.noConflict

I would like to know how to get event listeners in Chrome DevTools or Firefox DevTools when using jQuery noConflict.

<script src="https://code.jquery.com/jquery-3.7.0.js"></script>

<!--
external js file that I cannot change.
<script src="external.js"></script>
-->
<script>
//Contents of external.js
  let $j = $.noConflict(true);
  (function($) {
    $(function() {
      init();
    });
    function init() {
      $('.click').on('click', function() {
        console.log('click');
        return false;
      });
    }
  })($j);
  $j = null;
</script>

<a href="#" class="click">click</a>

DevTools

1

There are 1 best solutions below

1
Barmar On

Set a breakpoint after $j = $.noConflict(true);. Then you can manually assign some other variable to hold a reference to this version of jQuery:

myJQuery = $j;

Then you can use myJQuery in place of $ or jQuery to access the shadowed version of jQuery.