How To Inspect Element on iPhone [4 Quick Methods].pdf

Element inspection is necessary but you need to ensure that you understand how to do it. The reason is that when you are on a webpage with a lot of code, element inspection can help you locate specific elements.

2. HowToInspectElementoniPhone[4Quick
Methods]
IfyouhaveeverclickedInspectElementonyourcomputerbeforeand
scrolledthroughalonglistofelements,thenusedyourarrowkeysto
clickononeinparticular;thereisnoeasywaytosearchthrough
pagesuponpagesofHTMLtagslikethatonyoursmartphonesoif
youneedtofigureoutsomethingspecific withinawebsite,element
inspectionwillbeyourbestfriend.
YoucanlearnaboutanyelementonyouriPhonebyusingtheInspect
ElementfeatureinSafari,whichallowsyoutopreviewanyelementon
yourscreenwithoutleavingyourbrowserwindow.
InspectingelementsonyouriPhonewillhelpyoulearnwhatcodeis
behindthewebsiteyou’revisitingandhowitworks,butifyouneedto
reportanerrortothewebsiteowner,youshouldusetheErrorConsole

3. inyourbrowser(Chrome/Safari)instead.Here’showtoinspect
elementsontheiPhonesoyoucanlearnmoreaboutallofthe
elementsthatmakeupyourscreen!
4DifferentWaystoInspectElementsoniPhoneDevices
Inspectinganelementisessentialforwebdevelopersandother
professionalsinasimilarlineofwork.Therearemanywaystoinspect
elementsonyouriPhonedevices.Here,wewilldiscussfourpopular
methodsforinspectingelementsoniPhones.
1.UsingTestGridoniPhoneDevices:
Ithelpsyouinspectelementsondifferentmobiledevices.Testingout
websitedesignsandfunctionalitycanbeapainifyourtesterdoesn’t
haveaccesstoallofyourtargetdevices.Butitgivesyoumorecontrol,
nomatterwhereyouare!Here’showtouseittolookatallelements
withinyoursite.Ifthere’ssomethingyoucantaporswipeonyour
device,itwillhelpyoudiscoverwhatitdoes.
Theplatformisavaluabletoolforcross-browsertesting;Although
thatcouldquicklysetthestageforthetaskofinspectingelements,
however,developersmayneedsometimetocheckfor
responsivenessaswellasothermobile-specific issues.
Thestepsbelowwillinstructyouonhowtocheckcomponentsusing
theiPhone.
1.First,openTestGridinyourbrowserasitisacloud-basedtesting
tool.
2.Startthebrowser,selecttheiPhoneviewportontheleftsideof
thedevicepanel,andtypeintheURLyouwishtoview.

4. 3.Clickthedebuggerbuttontolaunchthewebinspector.Youcan
thenbegincheckingelementsoneithertheiPhoneoriPad.’
Itisalsopossibletoright-clickanywhereonthescreenandchoose
“Inspecttheelement”toaccessthetoolkitfordevelopers.
2.UsingSafariDeveloperToolstoInspectElementonan
ActualDevice:
Ifyou’rehavingtroublewithawebsiteandwanttofigureoutwhy
knowinghowtouseyourbrowser’sdevelopertoolscanhelp.Oneof
theseisSafariDeveloperToolsoniOS,whichisexcellentforlooking
atelementsonapage.Theprocessisn’tcomplicatedonceyouknow
howtouseit.
TheeasiestmethodtoinspectelementsoniOSdevicesistousethe
inspectelementfeatureontheiPhoneSafaribrowserfordesktops.
YoumayhaveguessedthatAppledevelopedthismethod,asApple
createditspecifically toworkwiththeirbrowser;however,theydon’t
offeralternativesforAndroidorotheroperatingsystems.
ToinspectelementswithSafariDeveloperTools,yourequirethree
items–aniPhone/iPad,aMac,andaUSBcable.
BelowarethestepsforinspectingelementsoniPhoneSafariwiththe
helpofSafaridevelopertools:
1.Afteryouhavethreedevicesconnected.StarttheSafariweb
browseronMacandselectPreferences.
2.Then,gototheAdvancedtabandcheckthe“ShowDevelop
menusinthemenubars”option.Bothoftheseoptionsare
highlightedintheimagebelow.

5. 3.You’renowreadytouseMactoinspectelementsonyouriPador
iPhone.Enablingthe“ShowDevelopmenuinthemenubar”
optionmakesthe“Develop”optionavailableinthebrowser’s
optionsbar.Whenyouselectit,thenameofyourdevicewill
appearinthemenu.
Itwilllaunchthewebinspectoronthedeviceyouareconnectedto.
Payattentiontotheabove,wherewementionedMacrepeatedlysince
thisonlyappliestothoseusinganAppledevice.Ifyou’reusing
somethingotherthanaMac,youwon’tbeabletoinstalltheSafari
webbrowserinWindows.
3.DebugUsingtheWebInspectorFeature
Debuggingissuesonmobilewebpagescanbeachallengeattimes.
But,beginningwithiOS6,AppleoffersaWeb-inspectorthatmakes
troubleshootingwebpagesmucheasierforiPhonesoriPads.Follow
thesestepstomakeuseofit:
1.MakesuretoconnecttheiOSphonetoyourmachine.
2.EnabletheWeb-Inspectorfunction.Todothis,gointosettings
andthenSafari,thenScrolltothebottom,thenopenthe
AdvancedMenu>
3.SwitchontheWebInspector
4.Navigatetothewebsiteyouwanttopreviewordebugonyour
smartphoneSafaribrowser.Afterthat,enableyourDevelop
optiononyourMacdevice.
ToactivatetheDevelopmenu,followthesesteps:
1.LaunchtheSafaribrowser
2.ClickSafarionthetop,thenopenPreferences,thenAdvanced.

6. 3.Makesuretochecktheboxthatsays“ShowDevelopmenuin
menubar”intheMenuBartoallowit.
4.Then,you’llseeyourDevelopmenuonthetopbar.Whenyou
clickonit,you’llseeyourthelinkediPhoneoriPadandtheURL
currentlyinSafari.
5.AfterclickingontheURL,anewinspectorwindowwillpopup,
lettingthedeveloperinspect,viewordebugthepageonan
iPhonedeviceusingtheirMac.SimplyclickontheResources
tab,andallinteractionswithweb-basedelementswillbe
highlightedinreal-timeontheiPhone.
4.AdobeEdgeInspect:
AdobeShadowisatoolcreatedbyAdobein2011andlaterchanged
toAdobeEdgeInspect.AdobeEdgeInspectwasacomponentofthe
AdobeEdgesuitewiththecapabilityofinspectingcomponentson
severaldevices.AdobeEdgeInspectovercomesthedifficultiesof
previoussolutionssinceitdoesn’trequiremacOSoperatingdevices.
Additionally,it’savailableonallversionsofWindowsandmacOS.
AdobeEdgeInspectalsosupportssyncedbrowsing.Thewebsiteis
openedononedeviceandsyncedacrossallassociateddevices,i.e.,
it’llbeopenacrossalldevices.Connectivitybetweenalldevicesusing
Wi-Fi.
HerearesomemethodsonhowtoexaminecomponentsoniPhoneby
usingAdobeEdgeInspect.
1.TouseAdobeEdgeInspectandinspectelementson
iPad/iPhone,downloadthesoftwareandensureallthedevices
areconnectedtothesameWi-Ficonnection.

7. 2.Whenyouopenawebsite,adialogueboxwillappearonall
devices.Alldeviceswillshowthedebuggersigninfrontofthem.
3.Putthedebuggerinfrontoftheelementthatyouwantto
inspect.
Thiswilllaunchthedevelopertools,allowingyoutoinspectthe
elementsofyouriOSdeviceasyouwouldawebsiteonaPC.Itisa
simple,quick,andeffectivesolution.
Thereweresomeinconsistenciesanddrawbackstothismethod,but
theseissueshavebeenfixedbyAdobenow.However,itsexecutable
filesareaccessiblefromtheinternetforalloperatingsystems.
Theappalsolacksacriticalcomponentofwebappdevelopment:the
abilitytoperformlocalwebtesting.Webdeveloperswastehours
inspectingelementsonvariousdevicesbecausetheydonotwant
theirissuestobecomethecustomers’problems.Ifyoureleaseanew
featureonanalreadypublishedwebsite,it’sadifferentstory.Butif
you’redevelopingthewebsiteforthefirsttime,youmaynothavean
URLtoopenitontheAdobeEdgeInspectforinspectiononaniPhone.
HowtoInspectElementsoniPhoneWithoutaComputer?
Ifyoudon’thaveaMacoryouwanttosneakintoasitedirectlyvia
youriPhoneIfso,you’llbehappytoknowthere’stheiOSShortcuts
applicationthatcandothis.TheShortcutsapponiOSprovidesa
varietyofpre-madeoptionswhichletyoulookatthepage’ssource
code,editawebpage,downloadimagesfromwebsites,andsearchfor
olderversionsofwebsitesthroughtheSafariapplication.

8. Unfortunately,thereisn’toneshortcutthatcanprovidefull-fledged
WebdebuggingcapabilitiesoniOS,whichiswhyyou’llrequirethe
shortcutsforeachofthesereasons.
●DependingonhowyouwanttoinspectwebpagesoniOS,you
canaddanyshortcutstoyouriPhonebysearchingforthem
insideShortcuts>Gallery.
●Inyoursearchresults,youwillfindtheshortcutyouwishtoadd
toyouriPhone.

9. ●Whenyouseeapreviewwindowopen,clickonthe‘AddWidget’
optionatthelowerright.

10. ●TheshortcutsarevisibleintheMyShortcuts>AllShortcuts
screenandwillbeaccessiblefromtheSafariShareSheet.0

11. ●Toviewapage,openitonSafariandclickthesharebuttonon
theright.

12. ●Inthesharesheet,scrolldowntolocatetheshortcutsyou
createdforyouriPhone.

13. ●SelectingEditWebPagewillallowyoutomodifypartsofthe
websitedirectly.Ifyouchooseoneofthethreeotherchoices,
you’llbeaskedtoselectwhetheryou’dliketheshortcutto
accessthepage.Clickon“AllowOnce’.
HowtoInspectElementoniPhoneGoogleChrome
InspectingwebsiteelementsusingaChromebrowseronyouriPhone
issimple.JustlaunchtheChromebrowseronyouriPhoneandvisita
website.Youmusttypeview-source:beforetheHTTPorHTTPSinthe
addressbar.Here,reloadthepagetoviewthefullinventory.
Conclusion
Inspectingandevaluatingelementsonapageisanessentialpartof
webdevelopmentanddesign.However,itcanbetrickytolocatethem,
especiallyifyou’reworkingwithanappthatdoesn’tincludedeveloper
toolsorifyou’reusingabrowserotherthanChrome.

14. Source:Thisarticlewasoriginallypublishedattestgrid.io.