1、打开手机web检查器。
通过【设置】>【Safari】>【高级】>【Web检查器】打开。见下图(点击查看大图),并且你会看到该选项下面对电脑 *** 作的相应描述,照做就好。
2、链接电脑(Mac)
2.1 先在手机Safari中打开你想调试的网页,并用数据线连接到电脑(我这里是Mac)
2.2 再在电脑上打开Safari点击【Develop】菜单,就会看到如下图所示(点击查看大图):
2.3 点击2.2中的网站名就会在电脑上打开Safari的控制台,如下图(点击查看大图):
3.调试网页
此时你可以查看手机网页的DOM结构,并且和电脑端网页调试无异,当鼠标滑过这些DOM节点的时候手机上的相应布局也会高亮起来,如下图(点击查看大图):
使用文本编辑编辑html5,然后用Mac自带浏览器运行html5,Mac电脑自带方便快捷,缺点是复杂的html5布局会混乱。复杂的html5可以在Mac上下载专门的web工具,下载相应的软件进行html5开发,如VSCode以.html结尾的文件可以使用文本编辑打开,也可以使用Mac自带浏览器直接打开
1、Sublime Text
Sublime Text 是一个跨平台的代码编辑器,同时支持Windows、Linux、Mac OS X等 *** 作系统,也是HTML和散文先进的文本编辑器。
Sublime Text具有漂亮的用户界面和强大的功能,主要功能包括:拼写检查,书签,完整的 Python API ,Goto 功能,即时项目切换,多选择,多窗口等等。
2、Dreamweaver
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器,拥有可视化编辑界面,支持代码、拆分、设计、实时视图等多种方式来创作、编写和修改网页,初学HTML5的人可以无需编写任何代码就能快速创建Web页面。
3、Adobe Edge
Adobe Edge是一款新型网页互动工具,允许设计师通过HTML5、CSS和Java制作网页动画。Edge的一个重要功能是Web工具包界面,方便确保页面在不同浏览器中的架构一致性。
4、WebStorm
WebStorm是一款Java 开发工具,目前已经被广大中国JS开发者誉为"Web前端开发神器"、"最强大的HTML5编辑器"、"最智能的Java IDE"等。
WebStorm具有的优势是:智能的代码补全、代码格式化、html提示、联想查询、代码重构、代码检查和快速修复、代码调试、代码结构浏览、代码折叠、包裹或者去掉外围代码。
5、HBuilder
HBuilder,即Html Builder的缩写,Builder是建造者的意思。HBuilder是一个极客工具,追求无鼠标的极速 *** 作,不管是敲代码的快捷设定,还是 *** 作功能的快捷设定,都融入了效率第一的设计思想。
HBuilder不为敲字母而花费时间,不为大小写拼错而调错半天,把精力花在思考上,想清楚后落笔如飞。支撑这个理念,除了体验上的精细设计,还要求我们突破很多世界级技术难题,包括语法库、语法结构模型、AST语法分析引擎。
参考资料来源:百度百科——Sublime Text
参考资料来源:百度百科——Dreamweaver
参考资料来源:百度百科——Adobe Edge
参考资料来源:百度百科——WebStorm
参考资料来源:百度百科——HBuilder
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)