如题所述
ä¸ãiOS + Safari
1ãæå¼ææºwebæ£æ¥å¨ã
éè¿ã设置ã>ãSafariã>ãé«çº§ã>ãWebæ£æ¥å¨ãæå¼ãè§ä¸å¾ï¼ç¹å»æ¥ç大å¾ï¼ï¼å¹¶ä¸ä½ ä¼çå°è¯¥é项ä¸é¢å¯¹çµèæä½çç¸åºæè¿°ï¼ç §å就好ã
2.é¾æ¥çµèï¼Macï¼
2.1 å å¨ææºSafariä¸æå¼ä½ æ³è°è¯çç½é¡µï¼å¹¶ç¨æ°æ®çº¿è¿æ¥å°çµèï¼æè¿éæ¯Macï¼
2.2 åå¨çµèä¸æå¼Safariç¹å»ãDevelopãèåï¼å°±ä¼çå°å¦ä¸å¾æ示ï¼ç¹å»æ¥ç大å¾ï¼ï¼
3.3 ç¹å»2.2ä¸çç½ç«åå°±ä¼å¨çµèä¸æå¼Safariçæ§å¶å°ï¼å¦ä¸å¾ï¼ç¹å»æ¥ç大å¾ï¼ï¼
3.è°è¯ç½é¡µ
å¦ä¸3.3å¾æ示ï¼æ¤æ¶ä½ å¯ä»¥æ¥çææºç½é¡µçDOMç»æï¼å¹¶ä¸åçµè端ç½é¡µè°è¯æ å¼ï¼å½é¼ æ æ»è¿è¿äºDOMèç¹çæ¶åææºä¸çç¸åºå¸å±ä¹ä¼é«äº®èµ·æ¥ï¼å¦ä¸å¾ï¼ç¹å»æ¥ç大å¾ï¼ï¼
äºãAndroid + Chrome
1.设置ææº
1.1ã设置ã>ãå ³äºææºã>ãçæ¬å·ï¼Build numberï¼ãï¼å¯¹çæ¬å·è¿ä¸é¡¹è¿ç¹7ä¸ï¼è¿æ¯å®æ¹ææ¡£éç说æ³ï¼å°±ä¼æ示âä½ å·²æ为å¼åè âã
1.2 åè¿åã设置ã>ãå¼åè é项ã>ãUSBè°è¯ãæå¼ææºUSBè°è¯ã
2.设置çµèï¼Macï¼
è¿åæ¯è¾éº»ç¦ï¼å 为è¦è£ ä¸ä¸AndroidçSDKã
2.1 ä¸è½½Android SDKï¼å¹¶è§£åï¼æææ´ä¸ªadtç®å½æ¾å¨äº /Users/David/adt/ è¿éã
2.2 设置ç¯å¢åé ãæå¼ç»ç«¯å¨Davidè·¯å¾ä¸ï¼å½¢å¦ DaviddeMacBook-Pro:~ David$ï¼è¾å ¥ open .bash_profileï¼å¦ææ件åå¨åä¼æå¼ï¼å¦æä¸åå¨ååè¾å ¥touch .bash_profile å建并æå¼è¿ä¸ªæ件ãå¨æ件éè¾å ¥export PATH=$PATH:/Users/David/adt/sdk/platform-tools:/Users/David/adt/sdk/tools ï¼å ³éä¿åãæåå¨ç»ç«¯éè¾å ¥ source .bash_profile æ¥æ´æ°ç¯å¢åéä½¿å ¶çæãç»ç«¯éè¾å ¥ adb åºç°å½ä»¤å¸®å©ä¿¡æ¯å°±æ¯æåäºã
2.3 å¨ç»ç«¯éè¾å ¥ adb forward tcp:9222 localabstract:chrome_devtools_remote ã
3.é¾æ¥çµè
3.1 å¨ææºä¸çChromeéæå¼æ³è¦è°è¯çç½é¡µï¼ç¨æ°æ®çº¿è¿æ¥ææºåçµèï¼æçæ¯Macãåï½æåªæ¯å¼ºè°å¹³å°çä¸åï¼ä¸è¦è¯¯ä¼ï¼ã
3.2 æå¼çµèä¸çChromeï¼å¨å°åæ éè¾å ¥ about:inspect éä¸ ãDiscover USB Devicesãåé¢çå¤éæ¡ãåºç°ä¸å¾ç»é¢ï¼ç¹å»æ¥ç大å¾ï¼ï¼
4.è°è¯ç½é¡µ
4.1 ä½ å¯ä»¥ç¹å»å¾3.2ä¸æ£æµå°ç设å¤ä¸æ£å¨è¿è¡çç½ç«ä¸é¢é£ä¸ªãinspectãï¼æè å¨æµè§å¨ä¸è¾å ¥ localhost:9222 æå¼ææºæ£å¨æµè§çç½é¡µå表ï¼å¦ä¸å¾ï¼
4.2 ç¹å»ä¸å¾ä¸çç½ç«ç¼©ç¥å¾ï¼å°±ä¼è·³è½¬å°Googleçä¸ä¸ªä»£çé¾æ¥ï¼é¾æ¥å¯è½è¢«å¢â¦â¦ï¼æ代çï¼å°±ä¼æå¼å¦ä¸å¾æ示çæ§å¶å°ï¼ç¹å»æ¥ç大å¾ï¼ï¼
4.3 è¿å°±åçµèä¸ç½é¡µè°è¯æ²¡ä»ä¹å·®å«äºï¼é¼ æ ç»è¿DOMèç¹ï¼ææºä¸çå¸å±åæ ·ä¹ä¼é«äº®èµ·æ¥ï¼
1ãæå¼ææºwebæ£æ¥å¨ã
éè¿ã设置ã>ãSafariã>ãé«çº§ã>ãWebæ£æ¥å¨ãæå¼ãè§ä¸å¾ï¼ç¹å»æ¥ç大å¾ï¼ï¼å¹¶ä¸ä½ ä¼çå°è¯¥é项ä¸é¢å¯¹çµèæä½çç¸åºæè¿°ï¼ç §å就好ã
2.é¾æ¥çµèï¼Macï¼
2.1 å å¨ææºSafariä¸æå¼ä½ æ³è°è¯çç½é¡µï¼å¹¶ç¨æ°æ®çº¿è¿æ¥å°çµèï¼æè¿éæ¯Macï¼
2.2 åå¨çµèä¸æå¼Safariç¹å»ãDevelopãèåï¼å°±ä¼çå°å¦ä¸å¾æ示ï¼ç¹å»æ¥ç大å¾ï¼ï¼
3.3 ç¹å»2.2ä¸çç½ç«åå°±ä¼å¨çµèä¸æå¼Safariçæ§å¶å°ï¼å¦ä¸å¾ï¼ç¹å»æ¥ç大å¾ï¼ï¼
3.è°è¯ç½é¡µ
å¦ä¸3.3å¾æ示ï¼æ¤æ¶ä½ å¯ä»¥æ¥çææºç½é¡µçDOMç»æï¼å¹¶ä¸åçµè端ç½é¡µè°è¯æ å¼ï¼å½é¼ æ æ»è¿è¿äºDOMèç¹çæ¶åææºä¸çç¸åºå¸å±ä¹ä¼é«äº®èµ·æ¥ï¼å¦ä¸å¾ï¼ç¹å»æ¥ç大å¾ï¼ï¼
äºãAndroid + Chrome
1.设置ææº
1.1ã设置ã>ãå ³äºææºã>ãçæ¬å·ï¼Build numberï¼ãï¼å¯¹çæ¬å·è¿ä¸é¡¹è¿ç¹7ä¸ï¼è¿æ¯å®æ¹ææ¡£éç说æ³ï¼å°±ä¼æ示âä½ å·²æ为å¼åè âã
1.2 åè¿åã设置ã>ãå¼åè é项ã>ãUSBè°è¯ãæå¼ææºUSBè°è¯ã
2.设置çµèï¼Macï¼
è¿åæ¯è¾éº»ç¦ï¼å 为è¦è£ ä¸ä¸AndroidçSDKã
2.1 ä¸è½½Android SDKï¼å¹¶è§£åï¼æææ´ä¸ªadtç®å½æ¾å¨äº /Users/David/adt/ è¿éã
2.2 设置ç¯å¢åé ãæå¼ç»ç«¯å¨Davidè·¯å¾ä¸ï¼å½¢å¦ DaviddeMacBook-Pro:~ David$ï¼è¾å ¥ open .bash_profileï¼å¦ææ件åå¨åä¼æå¼ï¼å¦æä¸åå¨ååè¾å ¥touch .bash_profile å建并æå¼è¿ä¸ªæ件ãå¨æ件éè¾å ¥export PATH=$PATH:/Users/David/adt/sdk/platform-tools:/Users/David/adt/sdk/tools ï¼å ³éä¿åãæåå¨ç»ç«¯éè¾å ¥ source .bash_profile æ¥æ´æ°ç¯å¢åéä½¿å ¶çæãç»ç«¯éè¾å ¥ adb åºç°å½ä»¤å¸®å©ä¿¡æ¯å°±æ¯æåäºã
2.3 å¨ç»ç«¯éè¾å ¥ adb forward tcp:9222 localabstract:chrome_devtools_remote ã
3.é¾æ¥çµè
3.1 å¨ææºä¸çChromeéæå¼æ³è¦è°è¯çç½é¡µï¼ç¨æ°æ®çº¿è¿æ¥ææºåçµèï¼æçæ¯Macãåï½æåªæ¯å¼ºè°å¹³å°çä¸åï¼ä¸è¦è¯¯ä¼ï¼ã
3.2 æå¼çµèä¸çChromeï¼å¨å°åæ éè¾å ¥ about:inspect éä¸ ãDiscover USB Devicesãåé¢çå¤éæ¡ãåºç°ä¸å¾ç»é¢ï¼ç¹å»æ¥ç大å¾ï¼ï¼
4.è°è¯ç½é¡µ
4.1 ä½ å¯ä»¥ç¹å»å¾3.2ä¸æ£æµå°ç设å¤ä¸æ£å¨è¿è¡çç½ç«ä¸é¢é£ä¸ªãinspectãï¼æè å¨æµè§å¨ä¸è¾å ¥ localhost:9222 æå¼ææºæ£å¨æµè§çç½é¡µå表ï¼å¦ä¸å¾ï¼
4.2 ç¹å»ä¸å¾ä¸çç½ç«ç¼©ç¥å¾ï¼å°±ä¼è·³è½¬å°Googleçä¸ä¸ªä»£çé¾æ¥ï¼é¾æ¥å¯è½è¢«å¢â¦â¦ï¼æ代çï¼å°±ä¼æå¼å¦ä¸å¾æ示çæ§å¶å°ï¼ç¹å»æ¥ç大å¾ï¼ï¼
4.3 è¿å°±åçµèä¸ç½é¡µè°è¯æ²¡ä»ä¹å·®å«äºï¼é¼ æ ç»è¿DOMèç¹ï¼ææºä¸çå¸å±åæ ·ä¹ä¼é«äº®èµ·æ¥ï¼
温馨提示:答案为网友推荐,仅供参考
第1个回答 2016-04-11
一、iOS + Safari
1、首先,打开手机web检查器。
通过【设置】>【Safari】>【高级】>【Web检查器】打开。见下图(点击查看大图),并且你会看到该选项下面对电脑操作的相应描述,照做就好。
2.然后链接电脑(Mac)
2.1 先在手机Safari中打开你想调试的网页,并用数据线连接到电脑(我这里是Mac)
3.调试网页
如上3.3图所示,此时你可以查看手机网页的DOM结构,并且和电脑端网页调试无异,当鼠标滑过这些DOM节点的时候手机上的相应布局也会高亮起来,如下图(点击查看大图):
二、Android + Chrome
1.设置手机
1.1【设置】>【关于手机】>【版本号(Build number)】,对版本号这一项连点7下(这是官方文档里的说法)就会提示“你已成为开发者”。
1.2 再返回【设置】>【开发者选项】>【USB调试】打开手机USB调试。
2.设置电脑(Mac)
这块比较麻烦,因为要装一下Android的SDK。
2.1 下载Android SDK,并解压,我把整个adt目录放在了 /Users/David/adt/ 这里。
2.2 设置环境变量 。打开终端在David路径下(形如 DaviddeMacBook-Pro:~ David$)输入 open .bash_profile,如果文件存在则会打开,如果不存在则再输入touch .bash_profile 创建并打开这个文件。在文件里输入export PATH=$PATH:/Users/David/adt/sdk/platform-tools:/Users/David/adt/sdk/tools ,关闭保存。最后在终端里输入 source .bash_profile 来更新环境变量使其生效。终端里输入 adb 出现命令帮助信息就是成功了。
2.3 在终端里输入 adb forward tcp:9222 localabstract:chrome_devtools_remote 。
3.链接电脑
3.1 在手机上的Chrome里打开想要调试的网页,用数据线连接手机和电脑(我的是Mac。唉~我只是强调平台的不同,不要误会)。
3.2 打开电脑上的Chrome,在地址栏里输入 about:inspect 选中 【Discover USB Devices】前面的复选框。出现下图画面(点击查看大图):
4.调试网页
4.1 你可以点击图3.2中检测到的设备上正在运行的网站下面那个【inspect】,或者在浏览器中输入 localhost:9222 打开手机正在浏览的网页列表,如下图:
4.2 点击上图中的网站缩略图,就会跳转到Google的一个代理链接(链接可能被墙……,挂代理)就会打开如下图所示的控制台(点击查看大图):
4.3 这就和电脑上网页调试没什么差别了,鼠标经过DOM节点,手机上的布局同样也会高亮起来:
1、首先,打开手机web检查器。
通过【设置】>【Safari】>【高级】>【Web检查器】打开。见下图(点击查看大图),并且你会看到该选项下面对电脑操作的相应描述,照做就好。
2.然后链接电脑(Mac)
2.1 先在手机Safari中打开你想调试的网页,并用数据线连接到电脑(我这里是Mac)
3.调试网页
如上3.3图所示,此时你可以查看手机网页的DOM结构,并且和电脑端网页调试无异,当鼠标滑过这些DOM节点的时候手机上的相应布局也会高亮起来,如下图(点击查看大图):
二、Android + Chrome
1.设置手机
1.1【设置】>【关于手机】>【版本号(Build number)】,对版本号这一项连点7下(这是官方文档里的说法)就会提示“你已成为开发者”。
1.2 再返回【设置】>【开发者选项】>【USB调试】打开手机USB调试。
2.设置电脑(Mac)
这块比较麻烦,因为要装一下Android的SDK。
2.1 下载Android SDK,并解压,我把整个adt目录放在了 /Users/David/adt/ 这里。
2.2 设置环境变量 。打开终端在David路径下(形如 DaviddeMacBook-Pro:~ David$)输入 open .bash_profile,如果文件存在则会打开,如果不存在则再输入touch .bash_profile 创建并打开这个文件。在文件里输入export PATH=$PATH:/Users/David/adt/sdk/platform-tools:/Users/David/adt/sdk/tools ,关闭保存。最后在终端里输入 source .bash_profile 来更新环境变量使其生效。终端里输入 adb 出现命令帮助信息就是成功了。
2.3 在终端里输入 adb forward tcp:9222 localabstract:chrome_devtools_remote 。
3.链接电脑
3.1 在手机上的Chrome里打开想要调试的网页,用数据线连接手机和电脑(我的是Mac。唉~我只是强调平台的不同,不要误会)。
3.2 打开电脑上的Chrome,在地址栏里输入 about:inspect 选中 【Discover USB Devices】前面的复选框。出现下图画面(点击查看大图):
4.调试网页
4.1 你可以点击图3.2中检测到的设备上正在运行的网站下面那个【inspect】,或者在浏览器中输入 localhost:9222 打开手机正在浏览的网页列表,如下图:
4.2 点击上图中的网站缩略图,就会跳转到Google的一个代理链接(链接可能被墙……,挂代理)就会打开如下图所示的控制台(点击查看大图):
4.3 这就和电脑上网页调试没什么差别了,鼠标经过DOM节点,手机上的布局同样也会高亮起来:
第2个回答 2016-03-21
谷歌浏览器有个按钮可以将电脑版调成手机版。其实电脑网页和手机网页的差别只在于分辨率而已