怎样在F12下查看源码和调试网页CSS

Posted 2023-04-16

1、在浏览器中打开要调试的网页，使用快捷键F12。

2、在弹出的工具窗口中，默认是在Dom Explorer功能，列出网页的源代码和CSS样式列表。

3、使用元素定位功能选择页面中的一个元素同时也定位到源代码中位置，比如百度首页的"网页"元素。

4、对定位到的文字修改CSS样式，添加inline style，比如把字体变红色。也可以手工修改其他已经存在的样式。

5、查看元素已经应到到的CSS样式，点击"computed"菜单。

6、查看元素的布局信息，点击"Layout"菜单。

参考技术A 按F12：在浏览器右边或下边会出现源码，鼠标放到源码上不同位置，在网页上会即时显示不同范围。
使用左上角的快速定位，在网页上定位你要调试的元素并点击，源码区会定位到相应的源码。
此时可以修改html的属性和CSS啦本回答被提问者采纳

如何查看手机Web页面中的调试信息

　　用谷歌浏览器

　　把你想查看的页面地址发到电脑上
　　打开谷歌浏览器
　　按“F12”进入开发人员工具
　　在选项卡最左侧有一个手机的标标志，点击它
　　此时你的浏览器会模拟手机或者平板，在左侧上方有一个“Device”
　　选择你下拉菜单中的“Apple Ipad”，他就可以打开手机Web页面了
　　将你的页面地址在这个状态下的谷歌浏览器中打开
　　右侧就是你要看的源代码和调试信息了

　　注：谷歌浏览器对开发者来说非常强大，你若是网站开发得学着去用谷歌浏览器 参考技术A 这个还不简单，直接建个jsp页面，调用action中的方法就好了。
例如：
action中一方法
List test=null; //这里是一个集合

request.setAttribute("test",test);
jsp页面
<s:iterater var="test" value="#request.test"/>
<s:property value="#test.Name" >//name 为实体字段。
</s:iterater>
这样就可以简单的测试。