打开谷歌浏览器，在页面上右键点击，选择“检查”或者按F12键，就能进入开发者工具界面。在顶部的标签页中，找到并点击“源代码”选项卡，这里面显示的就是当前网页的HTML、CSS和JavaScript代码。
在“源代码”选项卡中，可以通过点击左侧的文件树来浏览不同的脚本文件。找到需要调试和优化的JavaScript文件后，双击它，代码就会显示在右侧的编辑区域中。
接下来就可以开始调试代码了。在代码中设置断点是个很重要的操作。把光标放在想要设置断点的代码行上，然后点击行号旁边的空白处，就能设置一个断点。当网页加载到这一行代码时，执行就会暂停，这样就可以逐步检查代码的运行情况了。
还有一种方法是使用“控制台”面板来调试。切换到“控制台”选项卡，在这里可以直接输入JavaScript代码并立即执行，也能看到代码执行过程中输出的各种信息，比如错误提示等。通过分析这些信息，就能找到代码中可能存在的问题。
要优化JavaScript代码，首先要查看代码的结构和逻辑。看看有没有重复的代码片段，如果有，可以把它们提取出来，写成函数，这样能提高代码的复用性。同时，尽量减少全局变量的使用，因为全局变量可能会引发一些难以预料的错误。
另外，要注意代码的执行效率。避免在循环中进行复杂的计算或者频繁地操作DOM元素，这些都会影响页面的性能。可以使用一些性能分析工具来找出代码中的瓶颈部分，然后针对性地进行优化。
完成调试和优化后，再次刷新网页，检查修改后的代码是否达到了预期的效果。如果还有问题，就继续按照上述步骤进行调整，直到网页中的JavaScript代码能够正确、高效地运行。