• 保存到桌面  加入收藏  设为首页
HTML5

HTML5-调试技巧

时间:2017-09-19 17:19:34   作者:江节胜   来源:胜行天下   阅读:425   评论:0

---浏览器调试模式设置浏览器环境为极速模式

1、调试技巧,console不一定是在最后一行报错,要在之前的log中看看有没有报错

2、关于去掉第三方Css属性或者调整css,可以在浏览器中F12,选择Elements ,确定其中的属性,直接复制class后在网页中重写css

3、布局调试技巧:给不同的标签加上背景

4、HTML的布局代码写在js中 会出现布局不同的问题 比如含有 | 的情况
在js中的竖线 后添加 

5、当在调试用语言动态生成html的网页时候,可以在网页上右击查看源代码,从生成的代码上分析原因

6、php环境下print_r(数组)  右击查看框架源代码 可以查看格式化的数组结构(可能需要浏览器支持)

7、浏览器中调试CSS,存在element.style{  xxxx } 样式时,因为原始样式被加上 !important,通过在内嵌css样式中,重写css并添加 !important 解决。
想去掉类似于动画的效果可是直接重写为none
      * {
-moz-transform: none !important;
-webkit-transform: none !important;
-o-transform: none !important;
-ms-transform: none !important;
transform: none !important;
-webkit-transition: none !important;
}


8、样式调整无效
1、是不是引入的css的优先级的问题 给自己定义的css属性设置 !important
2、css中存在错误的属性名称或者存在重复的属性

9、js尽可能放在方法体的外围,避免重复执行产生太多的对象

10、Google Chrome 调试模式模拟浏览环境-可继续缩放页面浏览大小
Chrome版本:ChromeStandalone_58.0.3029.81_Setup.exe

F12->右上方->更多图标->More tools->Network conditions->User agent->去掉Select automatically勾选->选择模拟浏览环境


11、浏览器调试环境中快读找到某个元素的class
    打开F12,右边选项菜单中第一个箭头用于单位当前元素的class   

12、
overflow容易引起卡顿;
布局有问题但是难以确定是那部分布局的问, 一块块删除HTML后刷新;
调试js看不出反应,看看F12是不是报错了

有任何疑问或技术合作都可联系我

微信:yanfahezuo 【推荐】

QQ:596957738


标签:HTML5  调试技巧  
相关评论

加我微信 596957738 (QQ同号)加我微信     QQ联系:596957738    地址:江苏省南京市浦口区

苏ICP备2023050353号

   

苏公网安备32011402010305号

江节胜的Gitee,江节胜的Git地址