怎样使用chrome调试前端html和css
2015-09-17 10:33
621 查看
chrome开发者工具为开发者提供了十分方便快捷的快速开发模式,例如,本地服务器打开网页,按F12打开控制台------>点击source面板,看见左侧有个localhost:端口号的文件夹,在空白处点击右键————————>点击add
folder to workspace ,会将你本地网站资源添加至其中,在index.html中为其添加文本映射(右键选项),确定后,就可以在source面板中直接编辑
你的html+css+js了,ctrl+s保存后,页面直接改变,无需刷新
,是不是很方便!快点行动吧,以下是操作步骤截图
在空白处点击右键添加
添加进来和localhost的文件夹一样
选择index.html点击右键
添加映射关系
选择匹配的index.html
同意点击确定
完成映射,在右侧编辑栏直接编辑你的代码,保存按ctrl+s,即可保存至本地,是不是很强大,拥抱chrome吧!
folder to workspace ,会将你本地网站资源添加至其中,在index.html中为其添加文本映射(右键选项),确定后,就可以在source面板中直接编辑
你的html+css+js了,ctrl+s保存后,页面直接改变,无需刷新
,是不是很方便!快点行动吧,以下是操作步骤截图
在空白处点击右键添加
添加进来和localhost的文件夹一样
选择index.html点击右键
添加映射关系
选择匹配的index.html
同意点击确定
完成映射,在右侧编辑栏直接编辑你的代码,保存按ctrl+s,即可保存至本地,是不是很强大,拥抱chrome吧!
相关文章推荐
- CSS让文本只显示一行,超出部分隐藏或以三个点结束
- DIV+CSS的经典翻页代码
- 使用CSS3实现百叶窗
- 基于CSS实现的4级下拉菜单效果代码
- html+css做页面如何不会乱
- CSS 符合习惯的代码规范
- css里面常用一些通用样式写法
- Word使用样式技巧:解决创建目录后出现的打印错误---超链接错误
- CSS样式小总结
- HTML&CSS Learning Notes 5
- css属性学习笔记
- 【搬运】CSS实现背景透明,文字不透明,兼容所有浏览器
- css中 outline 的使用
- css重点
- CSS hack方式
- 用CSS、HTML编写一个两列布局的网页,右侧宽度为200px,左侧自动扩展。
- CSS学习总结
- css 盒模型详解
- CSS实现多行文本溢出省略效果和单行文本溢出省略效果
- CSS3动画