In the chrome dev tool, the script corresponding to in the part displayed in the 'Element tab' does not appear in the 'Source tab' and cannot be reflected even if modified. What should I do if I want to keep the screen modified with some functions in this section?
I know how to modify only the html (element window) or .js from the head (console window). However, I don't know how to modify javascript in html window (scripts exist in element window).
You can change a <script> in the HTML the same way you can change any other part of the HTML: by saving the page Source HTML for Local Overrides and then making edits to the HTML response in the Sources panel. For example, this Stack Overflow page has an inline <script> in the <head> which initializes Stack Snippets and some other things, viewable in Elements:
Enable Chrome Local Overrides, open the page in the Sources panel, and make changes to it as desired:
Save your modifications to the inline script with control-S, and the will be viewable the next time you load the page:
