① 为什么搜狗浏览器的兼容模式无法使用开发者工具
搜狗兼容模式调用IE,高速模式基于chrome修改优化。两个核心按下F12可以打开对应浏览器的调试开发者模式。如果搜狗兼容模式没有出现,对比IE是否正常。
上图是windows10下搜狗浏览器7.5.8兼容模式按下F12的效果。
② 搜狗浏览器如何开启WebGL功能
XP因为系统太久不兼容默认不会开GPU加速。win7及以上系统,安装新版驱动一般只要不是特别老的古董显卡都可以开。如果在修复工具中点过显卡加速关闭,需要改注册表开显卡加速。或者卸载重装浏览器。没有登陆账号记得备份收藏夹。
③ 我用的是搜狗浏览器,在调试的过程中,如果让浏览器变成高速,则页面的样式就好着,但是在兼容的状态,
搜狗兼容模式是调用IE。高速模式是独立修改优化版的CHROME核心。对比下IE。可能是IE版本太低不支持这个效果。比如IE6。另如果系统是IE8,需要在搜狗浏览器右上角的菜单-工具-搜狗高速浏览器选项-高级-开启:在兼容模式下使用高级渲染特性和GPU加速。否则就会用旧版兼容视图,相当于IE7.
④ 用搜狗浏览器出现网页调试的问题!是怎么回事啊
这个网页脚本有错误,看样子是兼容模式出错吧?对比ie看看ie是不是也有这个问题。
打开菜单栏“工具——internet选项——高级”勾选“禁用脚本调试(其他)”看看是否可以了?
⑤ 怎么在移动端调试web前端
日常开发中,用 Chrome 模拟 UA、屏幕尺寸 和 触摸特性,完成第一阶段的开发和调试。
<img src="https://pic4.mg.com/50/_hd.jpg" data-rawwidth="420" data-rawheight="169" class="content_image" width="420">
Android 的话,Chrome 也有提供对应的调试工具。
⑥ 如何在pc端调试android手机浏览器web页面兼容性
(1)PC Chrome最新版
(2)安卓 Chrome最新版
(3)数据线一根
插上数据线,打开手机里的浏览器,然后PC浏览器-菜单-更多工具-检查设备,就会看到如下界面:
点击inspect,稍等片刻即可打开调试界面:
⑦ 如何利用搜狗浏览器调试js
网页调试可以按F12开启开发者模式。具体参考chrome开发者模式和IE开发者模式使用流程。
也可以试试Tampermonkey Legacy。
(1)点击搜狗浏览器右上角扩展栏右边圆圈三个白点的扩展管理。
(2)点击获取。进搜狗浏览器应用中心搜索安装Tampermonkey Legacy。
(3)这个扩展里可以添加脚本命令。地址栏是闪电的那个高速模式生效。
⑧ 我想用手机测试自己写的web页面,该怎么做
一、IOS 移动端 (Safari开发者工具)
手机端:设置 → Safari → 高级 → Web 检查器 → 开。
mac端:Safari → 偏好设置 → 高级 → 在菜单栏中显示“开发”菜单。
在 OS X 中启动 Safari 之后,以 USB 电缆正常接入 iOS 设备,并在此移动设备上启动 Safari。此时点击计算机上的 Safari 菜单中的“开发”,可以看到有 iOS 设备的名称显示,其子菜单项即为移动设备上 Safari 的所有标签页,点击任意一个开始调试。
便捷,简单,还可以调试外壳包裹的浏览器如微信。
备注:顺便提一下,要调试不同版本的ios,可以进xcode 进行下载不同的系统包(当然是在没有设备的情况下,土豪略过)
二、安卓移动端
1、chrome 调试方法
首先确保手机上和PC机上装有最新版本的chrome浏览器,其次是将手机的开发者选项打开并允许调试,然后将数据线将两台设备连接起来。在PC机上打开chorme,输入chrome://inspect ,然后在手机上打开chrome,然后手机会弹框询问是否允许调试,当然确定啦。有时候手机锁屏会断开,请拔掉usb重来。
点击inspect打开DevTools后,你可以选中页面中的DOM元素,同时设备中对应元素也高亮显示,也可使用DevTools中的Inspect Element 选中目标元素,可以实时与移动设备页面交互,方便的定位问题所在,进行代码调试,就能像pc端一样愉快的玩耍了。如果有问题,请检查chrome版本。
作者:爱吃西红柿的鱼
链接:http://www.hu.com/question/37361845/answer/71674280
来源:知乎
着作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
chrome的调试一般只可以调试chrome页面,但是其官方文档说还可以调试WebViews:
“On your computer, the chrome://inspect page displays every connected device, along with its open tabs and debug-enabled WebViews.”
需要说明调试WebView需要满足安卓系统版本为Android 4.4+,并且需要再你的APP内配置相应的代码,在WebView类中调用静态方法,如下:
if (Build.VERSION.SDK_INT >=Build.VERSION_CODES.KITKAT) {
WebView.(true);
}
以上配置方法适用于安卓应用内所有的WebView情形。
安卓WebView是否可调试并不取决于应用中manifest的标志变量debuggable,如果你想只在debuggable为true时候允许WebView远程调试,请使用以下代码段:
if (Build.VERSION.SDK_INT>= Build.VERSION_CODES.KITKAT) {
if (0 != (getApplicationInfo().flags &=ApplicationInfo.FLAG_DEBUGGABLE{
WebView.(true);
}
}
我这里只写了个大概,如果有其他问题或者欲查看详细文档,看下面链接(自备梯子):
https://developer.chrome.com/devtools/docs/remote-debugging
注意:同样的你也可以在电脑上装安卓的虚拟机,推荐Genymotion ,一样的,想测什么版本,就自己下rom ,当然土豪当我没说。
2、UC开发者浏览器
由于不推荐移动端使用UC(大家应该自觉抵制移动端毒瘤),所以我只简单说一下,如果是在有兴趣,请自行查看: 开发者中心_UC优视︱UC浏览器︱全球第一大手机浏览器,用户超过5亿人︱手机浏览器
它的调试方法与chrome差异不大。
3、使用 Weinre 调试
该方法是比较老的一种方法,对于其他的调试方法来说属于刀耕火种型的。weinre是一个调试包,本身提供一个JavaScript,需要你在项目文件中加入该js。首先安装Weinre,我们用nodejs安装之,使用-g全局命令,以便可以在各个目录下访问:
npm install -g weinre
安装weinre之后再设置监听本机的ip:
然后打开返回的地址的说明文档,然后把返回的js写入到调试的文档中,注意我箭头所指向的地方。
这样访问页面的时候,加载这个 JS,就会被 Weinre 监听到进行控制。
小提示:这个 JS 后面的 #anonymous 起到一个标识作用,为了区别,我们可以将其修改成 #test 放到页面中。这时候,我们的 Inspect 面板的地址就不是 http://172.16.0.2:8080/client/#anonymous 了,而是 http://172.16.0.2:8080/client/#test 。
当我们访问页面的时候,就会出现在监听列表中,如果有多个网页,你可以从列表中选择一个。然后就可以使用后面的 Elements、Console 等面板来进行调试操作了:
Weinre 非常灵活,只需要在页面中加载这个 JS,然后访问即可,因此 WebView 可以用这种方法调试,一些低版本的 Android、iOS 也可以支持,Window Phone 也是可以用的。在调试移动设备时你可能需要在本地搭建一个局域网 IP 的服务器,将设备与本机网络连接成一个局域网,用移动设备访问这个网页即可。
当然 Weinre 也不是万能的,相比 Chrome 的调试工具,它缺少 JavaScript debug 以及 Profiles 等常用功能,但是它兼容性强,可以实现基础调试功能。
4、mihtool 测试
MIHTool 是国人开发的,基于 Weinre,用于 iOS 设备的前端开发测试。
与Weinre 的调试方式大体一样,即开启一个服务器,然后将 JS 插入到页面中,访问进行调试。
MIHTool 将这个过程简化了,它是一个 APP,可以直接安装到你的 iOS 设备里面,然后内置一个简单的浏览器可以打开你的测试页面,当它开启时,会自动向页面中插入 Weinre 的 JS,并告知 Weinre 控制台 URL 等信息,让你可以访问进行调试。
它还提供了一个公共的 Weinre 调试服务,生成类似 MIHTool Web Inspector 这样的链接,打开即可调试,非常方便,就是有些卡。
5、移动设备在线测试
移动端设备如此之多,小公司或者团队,没有这么多资金和精力购买如此多的测试设备进行测试。于是就有人买了这些设备,连接起来,提供在线调试服务。
一般就是他的真实手机设备打开,然后截屏出来供预览。
比如:BrowserStack 等,当然一般比较卡。
三、总结
调试方法很多,层出不穷,关键是要看自己是否顺手和熟练,关键在于按时按量的完成开发任务。
关键在于平时多积累跨坑姿势,少写一点不兼容的代码,调试就舒心一点。
如果这还不满足的话,可以查看更多资料:
移动端前端开发调试: http://yujiangshui.com/multidevice-frontend-debug/
移动开发真机调试: 移动开发真机调试
remote_inspect_web_on_real_device: jieyou/remote_inspect_web_on_real_device · GitHub
remote-debugging: https://developer.chrome.com/devtools/docs/remote-debugging
移动端Web开发调试之Chrome远程调试(Remote Debugging):移动端Web开发调试之Chrome远程调试(Remote Debugging)
------------2015/12/2 补充 BrowserSync 部分-------------
很多朋友再说为什么不写Browser-sync,还有给差评的,说实话吧,我之前不了解那个东西。花了点时间看了一下,找到了他们的官网:Browsersync - Time-saving synchronised browser testing 觉得还挺有趣的哈。
然后就用了,觉得还行,真的会省很多工夫,入门也快,差不多就5分钟快速入门,前端的轮子都这样。。。
1、首先安装 BrowserSync
npm install -g browser-sync
2、启动 BrowserSync,原理应该是那种检测文件变化,然后在服务端 websocket 通知浏览器变动,再加载新的变动文件,在不支持websocket 的浏览器上就轮训服务端的变化,在加载新文件。我只是简单的抓包看了下,也不知道说对了没有。233
此时分两种情况,一种是静态:
// 监听css文件
browser-sync start --server --files "css/*.css"
// 监听css和html文件
browser-sync start --server --files "css/*.css, *.html"
二种是动态:
// 主机名可以是ip或域名
browser-sync start --proxy "主机名" "css/*.css"
然后就上手了啊,就这么简单。。
还有gulp 配合哦。具体就看文档了:Browsersync + Gulp.js
总结,前端变化日新月异,一个月不学,感觉就落后了啊
-----------------我是分割线---------------
这里是 @于江水 大神的原文,之所以圈他一下,因为我的这个文档从他那儿粘贴了很多,这个是他的原文:--> 移动端前端开发调试 。
上面的更多资料部分,我也讲其放在第一个,不过之前的链接放错了,不是原博客链接,现在已更正。
这是我整理的,每一个我都真正的动手实现了的,关于安卓webview的调试部分我还补充了点我找到的资料 --> 移动端前端开发真机调试攻略
⑨ 如何利用Chrome devTools调试android手机上的web网站
一、安装Android SDK
下载Android SDK,地址:http://developer.android.com/sdk/index.html,本人的机器是windows,下载的文件为adt-bundle-windows-x86,解压并释放到D:/soft/android/adt(你也可以选择其他路径)
二、允许Android 手机启用USB调试
1、android系统设置:“设置”》“开发人员选项”》“USB调试”;
2、手机上Chrome浏览器设置:打开Chrome浏览器,点击左下角菜单按键,“设置”》“开发者工具”》“启用USB网页调试”
三、运行Android SDK
1、设置环境变量:右击“我的电脑”》“属性”》“高级”》“环境变量”》编辑“PATH”变量值,在末尾添加“;D:\soft\android\adt\sdk\platform-tools”
2、运行adb
打开cmd,输入如下命令:
Command代码
adb forward tcp:9222 localabstract:chrome_devtools_remote
详情如图:
四、调试
1、在手机上用Chrome打开需要调试的网站
2、在电脑上用Chrome打开http://localhost:9222/,如图所示:
3、调试
点击需要调试的网站,熟悉的Developer Tools就出来了,如图所示:
【完成】
至此,利用Chrome在android手机上调试网站的方法告一段落。
更详细的方法请看:
https://developers.google.com/chrome-developer-tools/docs/remote-debugging
更多的资料请参考:
http://www.html5rocks.com/en/mobile/profiling/
⑩ app中有webview调试模式吗
打开Android APP Webview调试模式
大家知道google提供了webview组件的调试工具devtools,通过devtools可以直接在pc端的chrome上直接调试app上的html内容,前提是webview必须打开debug模式。
有时候我们需要测试webview的html5性能参数时发现在chrome上找不到我们想要的页面这就是因为APP的webview组件debug模式没有打开,下面看下具体怎么打开webview组件的调试模式。
新建一个demo,demo中新建一个webview对象
安装app到手机打开chrome的inspect工具
在chrome inpect中能找不到调试页面的入口
修改代码增加
webView.(true);
再次安装app到手机并打开APP,打开chrome的inspect工具
发现在chrome inpect中能找到调试页面的入口了
打开webview的debug模式很简单,直接在对象实例中增加这一句就可以了
webView.(true);
需要注意的是每个webview组件实例需要单独设置,下次在遇到inspect找不到html调试入口就可以自己修改代码了
作者:ddssf
链接:http://www.jianshu.com/p/ebd9736ad274
来源:简书
着作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。