wda inspector
whentheyworkwithmobileforthefirsttimemanydesigner-developersassumethatpagechangesmustbeuploadedtoaserverbeforetheycanbesesenonogner forextremelydrawn-outtroubleshooting 3360 fixesformobileareguessedat，coded，uploaded，and the移动浏览器refreshed，witthh
当他们第一次使用移动设备工作时，很多设计师认为页面更改必须在移动设备上显示之前上传到服务器。 这将使故障诊断工作非常冗长。 猜测，编码，上传移动修复程序，更新移动浏览器。 这个过程将重复几十次，直到问题得到解决。
Thankfully，there ' samuchbetterandmorestreamlinedway，ifyouhaveamacandanidevice (iphone，iPad，etc )。
幸运的是，如果您有Mac和idevice(iphone、iPad等)，这是一个更好、更简单的方法。
Before you begin，makesureyouhavesetupdesktopandmobilesafariforwebdevelopment，分布式earlier。
开始之前，请确保为Web开发设置了桌面和Mobile Safari，如上所述。
startupmobilesafarionyouriosdeviceandnavigatetothepageyouwishtotest，whichcouldbeonalocal (开发)服务器服务startupsafarionyourmacandconnecttoyouryouriosdeviceusingthestandardcable。
在Mac上启动Safari，然后使用标准电缆连接到iOS设备。
On your Mac，gotothedevelopmenuinsafari.youshouldseethenameofyourdevice； movingthecursortothatentrywillshowyouthenameofthepagethatisbeinglookedatonyouriphone，iPod，or iPad。
在Mac中，导航到Safari的“开发”菜单。 显示设备的名称。 将光标悬停在此项目上，可以显示正在iPhone、iPod或iPad上查看的页面的名称。
choosingthenameofthepagewillbringupthesafariwebinspectoronyourmac.whiletherearemanythingsyoucandoatthispoint，you ' llprobathibathing
选择页面名称将在Mac上打开Safari Web Inspector。 此时可以执行许多操作，但可能需要从元素模式开始； 单击Web检查器窗口顶部的相应按钮。
you ' llfindthatmovingthecursoroverelementsinthewebinspectorindesktopsafari，willhighlightthematchingelementsontheiosdevice， asshowninthevideoatthetopofthisarticle.using this，and the Rules panel on the right side，you can change content，alter the styles for 诊断程序任务，withtheresultsdisplayedimmediatelyon
当您将光标悬停在桌面Safari上的Web Inspector元素上时，iOS设备上的匹配元素将突出显示，如本文顶部的视频所示。 使用此功能和右侧的“规则”面板，您可以更改内容、更改元素样式、诊断出现的问题的原因以及执行许多其他有用的任务，并将结果立即显示在移动设备上。
Unfortunately，safari doesn’tyetoffertheoptiontowriteyourchangesdirectlyintothesourcecodefromthebrowser， requiringyoutotransferanychangesovertoyoureditorofchoice.however，justasitstandsthefeatureisincrediblyuseful，allllowingyoutoution
遗憾的是，Safari没有将更改从浏览器直接写入源代码的选项，因此必须将所有更改传输到选定的编辑器中。 但是在目前的情况下，这个功能非常有用，不用猜测就可以直接诊断问题。 相比之下，传统的方法是在黑暗中盲目地冲破代码。
itshouldbenotedthatthere’sasimilarprocessavailableforandroiddevicesandchrome，atechniquei’llcoverinafuturearticle。
值得注意的是，安卓设备和Chrome也有类似的过程。 在今后的文章中将介绍这一技术。
3:https://the new code.com/215/use-mobile-safari-we B- inspector-for-real-time-responsive-trouble shooting
wda inspector