有沒有辦法找到我的HTML代碼使用的所有CSS代碼？

Question

我想查找以下HTML代碼使用的所有Bootstrap CSS代碼。我可以用什麼工具或方法來做到這一點？我更喜歡文本/代碼編輯器。我不想手動搜索。這需要太多時間。

<nav class="navbar navbar-default"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 
     aria-expanded="false"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
    <a class="navbar-brand" href="/"><b>Test</b></a> 
    </div> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
    <ul class="nav navbar-nav"> 
     <li><a href="/create"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Create</a></li> 
     <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Browse <span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
      <li><a href="#">Culture</a></li> 
      <li><a href="#">Geography</a></li> 
      <li><a href="#">Health</a></li> 
      <li><a href="#">History</a></li> 
      <li><a href="#">Mathematics</a></li> 
      <li><a href="#">Nature</a></li> 
      <li><a href="#">People</a></li> 
      <li><a href="#">Philosophy</a></li> 
      <li><a href="#">Religion</a></li> 
      <li><a href="#">Society</a></li> 
      <li><a href="#">Technology</a></li> 
     </ul> 
     </li> 
    </ul> 
    <form class="navbar-form navbar-left"> 
     <div class="form-group"> 
     <input type="text" class="form-control" placeholder="Search"> 
     </div> 
    </form> 
    <ul class="nav navbar-nav navbar-right"> 
     {{#if user}} 
     <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><img class="img-circle" src="/images/profile_photo.jpg" width="20" height="20"> {{username}} <span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
      <li><a href="/profile">My Profile</a></li> 
      <li><a href="/settings">My Settings</a></li> 
      <li><a href="/logout">Logout</a></li> 
     </ul> 
     </li> 
     {{else}} 
     <a class="btn btn-default navbar-btn" href="/login">Log In</a> 
     <a class="btn btn-primary navbar-btn" href="/signup">Sign Up</a> 
     {{/if}} 
    </ul> 
    </div> 
</div> 
</nav> 

Answer 1

替代idleberg的答案。 而不是編程方式，你可以使用這個Firefox插件掃描（未）使用的CSS代碼：https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/

Answer 2

看看uncss。它掃描用過的元素和類的靜態HTML頁面，並編譯一個簡化的CSS文件。它可以集成在您的Gulp或Grunt任務中。