利用Chrome自带debug程序解决Bootstrap下拉框JS不生效问题

今天想从Bootstrap中拷贝一段代码到自己的项目中，结果发现原封不动的官方代码，拷贝到自己本地就是不能用，记录下解决办法。

问题现象

官方的下拉框代码如下

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

将其拷贝到项目中如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
		<title>Bootstrap test</title>
	</head>
	<body>
		<div class="dropdown">
		  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
		    Dropdown
		    <span class="caret"></span>
		  </button>
		  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
		    <li><a href="#">Action</a></li>
		    <li><a href="#">Another action</a></li>
		    <li><a href="#">Something else here</a></li>
		    <li role="separator" class="divider"></li>
		    <li><a href="#">Separated link</a></li>
		  </ul>
		</div>
	</body>
</html>

注意这里我已经在<head>中引入了事先下载到本地的Bootstrap官方的css和js，但是没有效果，点击下拉框按钮根本就没有内容弹出来。

问题原因

于是用Chrome自带的调试器来检查下。

在Event Listener Breakpoints下找到Sources，选择Mouse下面的click，这样只要页面中出发了鼠标点击事件就会触发断点，进而可以单步执行找到出问题的JS代码。

我在官网上进行了上面的操作，结果发现程序进入了一段jQuery脚本，我恍然大悟（其实是Google了很久被大神提醒才意识到的），Bootstrap是基于jQuery的，单单导入Bootstrap的JS是不够的，还得导入jQuery的JS，而且jQuery必须在Bootstrap之前导入。

解决办法

于是解决办法也很简单，修改下<head>

<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<script src="./js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
		<title>Bootstrap test</title>
	</head>

之后成功实现官网的效果。

其实所有Bootstrap的JS效果都是基于jQuery的，所以官方的代码没达到效果可以首先看看有没有成功导入两个JS。

我是T型人小付，一位坚持终身学习的互联网从业者。喜欢我的博客欢迎在csdn上关注我，如果有问题欢迎在底下的评论区交流，谢谢。