4.10 调试外部样式表

开发者工具调式外部样式表主要包括两项内容：（1）是否加载外部样式表的CSS文件；（2）选择器是否匹配相应元素。

4.10.1 查看HTML页面加载的CSS文件

查看正确代码时元素应用的外部样式表选择器。

div1元素运用.div1选择器，右侧标记选择器定义的位置，表示.div1选择器定义在test.css文件的第18行。单击后跳转到“源代码”面板。

查看网络面板的请求响应。

默认是录制状态，如果是停止状态单击开启录制。刷新页面（快捷键F5），重新查看网络请求。了解ws请求： live server自动注入的script发出的websocket请求，用于自动刷新，通常不讨论它，实际项目生产环境通常用nginx等web服务器而不使用live server，也不会多出这个请求。

上述共两个页面请求test.html与test.css，test.css的“启动器”是“test.html:6”，表示test.html第6行代码引入test.css，与源码一致。

点击请求查看完整请求地址。注：这里方便演示直接在VSCode重新打开test.css所在目录为项目文件夹。

浏览器直接复制上述地址，或者在网络面板请求右键菜单“在新标签页中打开”。

4.10.2 GramError010 CSS文件路径错误

错误原因：故意改错代码，将CSS文件改成不存在的文件路径。

  <link rel="stylesheet" href="test111.css">

错误现象：所有样式都没有应用。

定位方法第1步：开发者工具查看div1元素的应用样式。

没有应用编写样式，可能是选择器写错，也可能是样式文件根本没有加载。

第2步：查看样式文件的加载情况，通过“网络”面板。打开网络面板并刷新页面，查看请求情况。

（1）红色表示请求失败，通常是因为请求文件不存在。

（2）“状态404”表示响应状态码，同样表示请求文件不存在。

（3）“启动器 test.html:6”表示用户在浏览器打开的test.html页面，test.html页面的第6行代码就是link标签再次发出请求test111.css。

现在准确定位了问题代码的文件与位置。解决方法略。