Exploring the depths of preact.js has proven to be quite a challenge. Despite successfully setting up the framework using webpack build from the preact-boilerplate setup, I am encountering difficulty in accessing and intercepting the code for debugging purposes. It seems that the transpiling, source-mapping, and other advanced features are hindering my ability to simply add console.log statements and debug effectively.
Although the preact source code can be found in the node_modules folder, it appears that this is not the code actually running or compiling due to real-time transpilation by tools like webpack or babel. I desire a setup where I can utilize preact.js while still having access to the code for debugging purposes, similar to referencing a jQuery file in a script tag on a webpage. While I understand the concept of adding preact.js directly to an HTML file, complications arise with babel transpilation. I am unsure of how to achieve this through webpack configuration options as well.
This situation feels ironic - attempting to simplify things but struggling nonetheless. It's like wanting to watch TV on an old black-and-white set amidst a room full of modern flat screens. Any guidance on how to make debugging simpler would be greatly appreciated. Thank you.