If you load javascript by specifying a path, there is a problem that you cannot enter even if you specify a breakpoint.
Intermittently enters breakpoints, to be exact. In the case of the code below, it may enter after 5 to 6 refreshes, and in some cases, it may not enter the breakpoint even after 20 refreshes. This number of refresh attempts seems to be purely random, with no regularity.
Below is the HTML code for loading javascript.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<th:block th:fragment="test">
<script src="/js/test.js"></script>
<div class="mx-auto container-lg top-div">
<div>TEST</div>
</div>
</th:block>
</html>
And below is the javascript code that is called.
window.onload = function() {
var aa = 100;
}
As you can see, it's just a code to see if you enter a breakpoint at the time of window.onload.
However, if you write the javascript in the HTML file as shown below, it will enter the breakpoint every refresh without any problems.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<th:block th:fragment="test">
<!--<script src="/js/test.js"></script>-->
<script>
window.onload = function() {
var aa = 100;
}
</script>
<div class="mx-auto container-lg top-div">
<div>TEST</div>
</div>
</th:block>
</html>
And the above page is loaded into the common Layout HTML using th:replace as shown in the code below.
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://thymeleaf.org">
<!--Layout Head-->
<div th:replace="/fragments/head.html :: head"></div>
<!--Layout Nav Header-->
<div th:replace="/fragments/topnav.html :: topnav"></div>
<!------------------------------------------------------------->
<!--Layout Content(Page)-->
<!--This is the part where the main content page is delivered from the controller and the
appropriate page is retrieved.-->
<!--The example in this article replaces the test fragment with th:replace below.-->
<div th:replace="@{'/page/' + ${layoutContent_Page}} :: ${layoutContent_Fragment}"></div>
<!------------------------------------------------------------->
<!--Layout Footer-->
<div th:replace="/fragments/footer.html :: footer"></div>
<!--Sidebar(Collapsed)-->
<div th:replace="/fragments/sidebar.html :: sidebar"></div>
</html>
What's the problem? As you can see, I'm using Intellij community, SpringBoot, and Bootstrap. I think there is something different about loading pages with javascript into th:replace.
One peculiarity is that when you check and refresh Chrome JS Debugger's Event Listener Breakpoints -> Load -> load, bootstrap eventhandler runs first and always enters the window.onload function of test.js written above.
