شروع با Safari در iOS 6 و بالاتر نسخه های بعدیمی توانید محتوای وب موبایل را از مک خود اشکال زدایی کنید. می توانید مشاهده کنید خطاهای جاوا اسکریپت، ویرایش کنید ویژگی های HTML، تغییر دادن ویژگی های cssدرست مانند توسعه برای Safari در OS X. این بخش نحوه استفاده از Web Inspector برای اشکال زدایی محتوای وب در iOS را شرح می دهد.
شما باید محتوای وب خود را هم روی دسکتاپ و هم روی دسکتاپ آزمایش کنید دستگاه های مختلف iOS. اگر ندارید دستگاه های iOSبرای آزمایش، می توانید از شبیه ساز iOS از iOS SDK استفاده کنید. از آنجایی که بین صفحات وب در iOS و OS X تفاوت وجود دارد، باید به طور خاص محتوای خود را در iPhone و iPad بررسی کنید یا شبیه سازی کنید. دستگاه سخت افزاریدر شبیه ساز هنگام آزمایش در Safari بر روی هر پلتفرمی، می توانید از Web Inspector برای اشکال زدایی محتوای وب استفاده کنید.
Web Inspector را در iOS فعال کنید
بازرس وب شامل اطلاعات ارزشمنددر مورد اینکه چه مشکلی ممکن است در محتوای وب شما پیش بیاید. حتی اگر Web Inspector از طریق Safari در OS X در دسترس است، می‌توانید از آن برای بررسی محتوای بارگذاری شده در Safari یا هر UIWebView در iOS استفاده کنید.
فعال کردن Web Inspector در iOS
- تنظیمات را باز کنید
- Safari را انتخاب کنید
- در پایین صفحه، Add-ons را انتخاب کنید
- Web Inspector را فعال کنید
از مک خود بازرسی کنید
با فعال بودن Web Inspector در IOS، دستگاه خود را با استفاده از مک خود به مک متصل کنید کابل یو اس بی. یک آیتم منو در منو ظاهر می شود توسعه سافاریدر OS X، همانطور که در شکل زیر نشان داده شده است. اگر نام دستگاه بلافاصله در منوی توسعه ظاهر نشد، Safari را مجدداً راه اندازی کنید و/یا کابل را دوباره وصل کنید.
نام آیتم منو یا نام هر دستگاه متصل و/یا نام شبیه ساز خواهد بود. منوی فرعی با صفحات موجود در سافاری iOS. برنامه باید در تاریخ راه اندازی شود پیش زمینهتا در منوی Develop ظاهر شود. صفحه مورد نظر خود را انتخاب کنید و Web Inspector در پنجره جدیدی باز می شود.
همه ویژگی های Web Inspector در OS X مانند زمان درخواست های HTTP، پروفایل جاوا اسکریپت یا دستکاری درخت DOM نیز در iOS موجود است. تنها تفاوت این است که با انتخاب صفحه وب خود از منوی Develop، به طور فعال محتوای وب را در دستگاه خود بررسی می کنید، نه در مک خود. اگر در حالی که بازرس پنجره باز است به آدرس دیگری در دستگاه خود بروید، متوجه خواهید شد که داده های بازرسی شده مجدداً بارگیری می شوند تا صفحه ای را که به آن رفته اید منعکس کند.
که در مرورگر سافاریچندین ابزار توسعه‌دهنده برای ایجاد آسان‌تر و اشکال‌زدایی یک سایت گنجانده شده است. به عنوان مثال، از طریق سافاری، می توانید نحوه ظاهر سایت را در آیفون و آیپد مشاهده کنید. برای انجام این کار، فقط باید از طریق منوی Develop، عامل کاربری مناسب را مشخص کنید (شکل 7.51).
برنج. 7.51. انتخاب یک عامل کاربر
سافاری همچنین یک ابزار عالی برای اشکال زدایی کدهای HTML و CSS به نام Web Inspector دارد. برای تماس با آن، منو را انتخاب کنید توسعه > نمایش بازرس وبیا از میانبر صفحه کلید Ctrl + Alt + I استفاده کنید. اگر این آیتم منو را ندارید، به تنظیمات مرورگر خود بروید، پانل افزونه ها را انتخاب کنید و کادر "نمایش منوی توسعه در نوار منو" را علامت بزنید.
Web Inspector منابع موجود در یک صفحه وب - اسناد، شیوه نامه ها، تصاویر و اسکریپت ها را فهرست می کند. به شما امکان می دهد کد صفحه وب و ویژگی های سبک عناصر را ببینید و پیدا کنید. رابط بازرس وب در شکل نشان داده شده است. 7.52. از بین همه غنای امکانات برنامه چیدمان، ما فقط به منوی Elements علاقه مندیم.
برنج. 7.52. بازرس وب
رابط بازرس وب شبیه به Firebug است - صفحه سمت چپ کد HTML را نشان می دهد سند فعلی، که در پنل سمت راست- سبک عنصر انتخاب شده هر عنصر در صفحه را می توان نه تنها از طریق کد انتخاب کرد، بلکه با کمک یک ابزار، به شما امکان می دهد یک عنصر را به سادگی با کلیک بر روی آن انتخاب کنید.
سبک تنظیم شده در بازرس به عنوان یک لیست کشویی ارائه می شود، این به شما امکان می دهد به طور فشرده آن را اضافه کنید حجم زیاداطلاعات اولین مورد "سبک محاسبه شده" (شکل 7.53) شامل سبک عنصر است که مرورگر را بر اساس تنظیم می کند. تیپ خود، حسابداری وراثت و اموال اضافه شده.
برنج. 7.53. سبک محاسبه شده
این سبک ها برای اطلاعات ارائه شده است، شما نمی توانید چیزی را در این پاراگراف تغییر دهید. در صورت وجود، می توان روی یک رنگ کلیک کرد و به هگزادسیمال، RGB یا HSL تغییر داد.
پاراگراف بعدی "Style Attribute" سبک درون خطی را نشان می دهد، یعنی سبکی که از طریق ویژگی style تنظیم شده است. اگر چنین سبکی وجود نداشته باشد، مورد خالی خواهد بود.
گروه زیرین موارد، سبک عنصر فعلی و عناصر مربوط به آن را نشان می دهد (شکل 7.54).
برنج. 7.54. سبک عنصر
هر ویژگی در این لیست با کلیک بر روی آن قابل ویرایش است. خواص جهانیمانند padding یا margin به عنوان یک لیست کشویی نمایش داده می‌شود که ویژگی‌های فردی را فهرست می‌کند، مانند padding-left، padding-top، و غیره. هر ویژگی یک علامت در کنار خود دارد که به شما امکان می‌دهد به سرعت آن ویژگی را غیرفعال کنید. با استفاده از منوی پنهان شده در پشت چرخ دنده در سمت راست می توانید یک قانون جدید اضافه کنید گوشه بالاییپانل ها (شکل 7.55).
برنج. 7.55. منوی اضافه کردن قوانین جدید
مورد "ابعاد" نشان می دهد مدل بلوکعنصر - عرض و ارتفاع عناصر، و همچنین مقادیر بالشتک، مرزها، حاشیه ها و موقعیت (شکل 7.56).
برنج. 7.56. ابعاد عنصر
فقط به خاطر داشته باشید که تورفتگی در اینجا نامیده می شود خواص بالشتکی، و فیلدهای حاشیه، i.e. برعکس، نه به معنای معمول.
این مورد نه تنها برای تعیین مقادیر مورد نظر، بلکه برای تنظیم آنها نیز قابل استفاده است. فقط دوبار کلیک کنید مقدار مورد نظرو یک عدد وارد کنید شما نیازی به تعیین واحدهای اندازه گیری ندارید، پیکسل ها به طور پیش فرض پذیرفته می شوند.
می داند که در مرورگر معمولیسافاری حاضر است منوی مخفی « توسعه". در این مقاله در مورد امکانات این بخش صحبت خواهیم کرد.
در تماس با
منوی توسعه در سافاری در مک برای چیست؟
اول از همه، این منو برای توسعه دهندگان وب که نیاز به دسترسی به کد، گزینه های مختلف برای نمایش صفحات، غیرفعال کردن محتوا و ... دارند مفید خواهد بود. همچنین چندین ویژگی مفید برای کاربران عادی وجود دارد.
از این منو می توانید به سرعت راه اندازی کنید صفحه فعلیدر هر مرورگر دیگری که روی مک نصب شده است. اگر سافاری نتواند محتوای چند رسانه ای را پخش کند بسیار مفید است. به عنوان مثال، اگر می خواهید یک فیلم VR تماشا کنید (برای عینک واقعیت مجازی)، سپس گوگل کروم برای این منظور بسیار مناسب تر است.
نه کمتر از ویژگی جالببه حالت نمایش تبدیل می شود کد برنامهصفحات چرا این ممکن است ضروری باشد؟ یک برگه وجود دارد " منابع"، به لطف آن دانلود تصویری که به فشار دادن پاسخ نمی دهد دشوار نخواهد بود کلید سمت راستموش.
همچنین عملکرد پاک کردن یا غیرفعال کردن حافظه پنهان مفید است. و گاهی اوقات نیاز به خاموش کردن نمایش تصاویر یا اسکریپت ها وجود دارد.
طراحان وب خودشان ابزارهای منو را کشف خواهند کرد. توسعه"، اما من می خواهم به طور جداگانه به امکان راه اندازی حالت اشاره کنم طراحی تعاملی. کیفیت بهینه سازی صفحه وب سایت را بسته به دستگاهی که در چه دستگاهی راه اندازی می شود و با چه وضوحی نمایش می دهد.
چگونه منوی Develop را در سافاری در مک فعال کنیم؟
1 . سافاری را راه اندازی کنید. از نوار منو، بخش را انتخاب کنید Safari → Preferencesیا میانبر صفحه کلید را فشار دهید فرمان (⌘) + , (کاما).
2 . برو به برگه " افزونه ها».
3 . در پایین، کادر کنار « را علامت بزنید نمایش منوی "توسعه دهنده" در نوار منو».
همه چيز! پس از این اقدامات در نوار منو ظاهر می شود بخش جدید « توسعه».
نحوه گسترش نشان داده شده است ویژگی های سافاریبا استفاده از پلاگین ها و ابزارهای شخص ثالث با این حال، گزینه های شما به همین جا ختم نمی شود. می توانید به گزینه های Safari که معمولاً برای توسعه دهندگان رزرو شده اند دسترسی داشته باشید. برای انجام این کار، فقط برنامه ترمینال را راه اندازی کنید، از وارد شوید خط فرمانتنها با یک دستور، پس از آن به دنیای کاملی از امکانات جدید - باورنکردنی و ارزشمند دسترسی خواهید داشت.
انجام راه اندازی محصولات اپلبا توجه به نیازهای شخصی، ممکن است متوجه شوید که بسیاری از دستور العمل های پیشنهادی دارای و سمت معکوس، یعنی هزینه ها به عنوان مثال، ممکن است گوشی خود را فلش کنید، اما سپس آن به روز رسانی های بعدی را پیدا کنید نرم افزارکار نخواهد کرد. شما می توانید خود را حفظ کنید پوشه خانهدر آی پاد خود، اما هر بار که نیاز به استفاده از رایانه دارید، باید آیپاد خود را متصل کنید. فقط دو تاست نمونه های عینی، ولی قانون کلیچیزی شبیه این به نظر می رسد: کار بیشترنیاز به تغییراتی دارد، بازده بالاتر. بیایید این را با مثال دیگری توضیح دهیم: با استفاده از ترمینال، می توانید معجزات واقعی ایجاد کنید، اما برای این کار باید تعداد قابل توجهی از دستورات و گزینه های آنها را یاد بگیرید.
شاید تنها استثنای این قانون منوی Debug در مرورگر سافاری باشد. فعال کردن منوی Debug در سافاری بسیار ساده است، مزایای آن بی شمار است و هیچ عارضه جانبی منفی وجود ندارد. یعنی از دیدگاه یک هکر، این دستور غذا فقط مزایایی را ارائه می دهد. با توجه به سادگی آن، بیایید آن را عملی کنیم. همانطور که قبلا ذکر شد، برای انجام این کار، کافی است برنامه Terminal را اجرا کنید و دستور زیر را از خط فرمان وارد کنید:
1defaults بنویسید com.apple.Safari IncludeDebugMenu 1هیچ چیزی در برنامه ترمینال پس از اجرای این دستور اتفاق نمی افتد. اگر در همان زمان مرورگر Safari را باز کردید، در نگاه اول ممکن است به نظر شما برسد که این دستور هیچ تاثیری نداشته است. با این حال، اینطور نیست. برای مشاهده تغییرات ایجاد شده در نتیجه اجرای دستور، Safari را ببندید و سپس دوباره آن را راه اندازی کنید - و خواهید دید که نوار منو ظاهر شده است. تیم جدید- اشکال زدایی (شکل 2.14).
به محض فعال کردن منوی Debug، متوجه خواهید شد که این منو بسیاری از موارد قبلی را باز می کند گزینه های در دسترس نیستسافاری بیشتر گزینه ها فقط مورد توجه توسعه دهندگان هستند. با این حال، برخی از آنها واقعا می توانند شما را لذت ببرند. آیا می خواهید بدانید، برای مثال، وب گردی با سافاری چقدر منابع مصرف می کند؟ ساده ترین راه برای پاسخ به این سوال استفاده از گزینه Start Stress Test از منوی Debug است. هنگامی که این دستور را انتخاب کردید، Safari به http://del.icio.us می رود و شروع به بارگیری صفحه بعد از صفحه می کند و در عین حال میزان کار انجام شده را پیگیری می کند (شکل 2-15).
این به شما این امکان را می دهد که کارهایی بیش از تخمین حجم ترافیک سافاری انجام دهید. برای آن دسته از کاربرانی که برای جستجوی صفحات وب جالب به تنهایی تنبل هستند، تست استرس سافاری همیشه چند صفحه را پیدا می کند که ممکن است مورد علاقه باشد. برای پایان دادن به تست استرس، دوباره منوی Debug را باز کرده و دستور Stop Stress Test را از آن انتخاب کنید. امکان انتخاب یک عامل کاربر از طریق منوی Debug که کمتر جالب است، اما کمتر از تست استرس سافاری مفید نیست. این به شما امکان می دهد از Safari استفاده کنید در حالی که وانمود می کنید که یک مرورگر متفاوت با سرورها هستید. در نگاه اول، این ویژگی مانند یک ویژگی مشکل ساز ابزار مشکوک به نظر می رسد. اصلا چرا خودتان را به عنوان یک مرورگر متفاوت به سرورها معرفی کنید؟
پس از همه، شما به چیزی که دارید افتخار می کنید - کاربر مک! اما در نتیجه گیری نباید عجله کرد. دیر یا زود با سایتی مواجه می شوید که نیاز به استفاده از همه بازدیدکنندگان دارد اینترنت اکسپلورر. اگر آشکارا به چنین سروری بگویید که از Safari استفاده می کنید، می توانید خود را خوش شانس بدانید - از خدمات خودداری خواهید کرد. اگر سافاری وانمود کند که ویندوز MSIE 6.0 است، به شما اجازه ثبت نام و دریافت سرویس مورد نظر داده خواهد شد، زیرا سایت ارائه دهنده خدمات گمراه می شود و "باور می کند" که شما یکی از آنها هستید. کلاینت های ویندوز(شکل 2.16).
با این حال، این لزوما به این معنا نیست که سایت به طور معجزه آسایی با سافاری به درستی کار می کند. اگر سایتی از ActiveX استفاده کند، سافاری نمی‌تواند با آن سایت کار کند، مهم نیست که برنامه چقدر اطلاعات هویتی خود را پنهان کند. با این حال، سایت‌های زیادی وجود دارند که صرفاً به دلیل تنبلی یا برنامه‌نویسان کدهای شلخته، از اینترنت اکسپلورر (IE) پشتیبانی می‌کنند. ما تأکید می کنیم که این به این دلیل نیست که سافاری نمی تواند اطلاعات را به درستی ارائه کند و با سرورها تعامل داشته باشد، بلکه به این دلیل است که مدیر وب به تنهایی کار می کند. راه اسانو تصمیم گرفت که پشتیبانی از اینترنت اکسپلورر برای او راحت تر باشد. در چنین مواقعی تغییر کاربر از طریق منوی Debug به شما کمک می کند که به شما امکان می دهد به سایت هایی دسترسی داشته باشید که قبلاً برای شما غیرقابل دسترسی بودند.
با یک عامل کاربر می توان به چیزهای بیشتری دست یافت. به عنوان مثال، اگر می خواهید بیشتر به دست آورید مشاهده سریع، می توانید به سرورها بگویید که از Mobile Safari 1.0 استفاده می کنید - بنابراین جعل هویت کاربر آیفون. برخی از صفحات فقط برای کاربران موبایلسافاری (مثال کلاسیک http://reader.mac.com/) و بسیاری از سایت های دیگر به طور خودکار کاربران موبایل سافاری را به صفحاتی با پهنای باند کمتر منتقل می کنند. به عنوان مثال، آمازون کاربران Mobile Safari را به صفحه ای با پهنای باند کمتر و ظاهر ساده تر هدایت می کند (شکل 2.17).
اگر هیچ مقدار از ترفندهای عامل کاربر نتواند نتیجه دلخواه شما را به دست آورد، منوی Debug حداقل از دردسر جستجوی مرورگر مناسب در پوشه برنامه ها جلوگیری می کند. اگر به چنین سایت مشکلی وارد شده اید که با Safari باز نمی شود، از منو انتخاب کنید دستورات اشکال زدایی← باز کردن صفحه با… و سپس از لیست انتخاب کنید مرورگر مناسب(شکل 2.18).
با این حال، امکانات ارائه شده توسط منوی Debug به ترفندهای عامل کاربر ختم نمی شود. هنگامی که منوی Debug را فعال می کنید، یک ابزار شگفت انگیز همه کاره و همه کاره برای بازرسی سایت ها نیز در اختیار خواهید داشت. با استفاده از آن، می‌توانید هر عنصری از صفحه را که مورد علاقه‌تان است کاوش کنید و نمایش کد سطح تودرتو را به‌طور کامل نشان می‌دهد و همچنین از برجسته‌سازی رنگی عناصر نحوی برای راحتی بیشتر استفاده می‌کند. برای راه‌اندازی Web Inspector برای کل صفحه، باید به نوار منو بروید (اشکال‌زدایی → نمایش بازرس وب)، اما اگر به کل صفحه علاقه‌مند نیستید، بلکه فقط به برخی از عناصر آن علاقه‌مندید، کافی است ماوس را روی آن نگه دارید. عنصر مورد نظر، کلیک کلیک راستماوس را انتخاب کنید منوی زمینهدستور InspectElement دقیقاً بخشی از صفحه را خواهید دید که می خواهید کاوش کنید (شکل 2.19).
در نهایت، منوی Debug گزینه های زیادی را در اختیار شما قرار می دهد. به عنوان مثال، اگر از فیدخوان RSS استفاده می کنید، می توانید پشتیبانی RSS را غیرفعال کنید اپلیکیشن ایمیلیا وسیله ای مستقل RSS Readerمانند NetNewsWire. علاوه بر این، با استفاده از منوی Debug، می توانید به چیزهای جالبی دست پیدا کنید جلوههای بصری- برای مثال، پنجره سافاری را شفاف کنید (شکل 2.20).
گزینه های بسیار جالب تری وجود دارد که با این حال، بیشتر مورد توجه توسعه دهندگان خواهد بود - به عنوان مثال، نشت حافظه (نشت جهانی)، نمایه سازی (پروفایل) و غیره. با این حال، یکی از بهترین ها گزینه های مفید، که در منوی Debug یافت می شود لیست بزرگمیانبرهای صفحه کلید سافاری این میانبرهای صفحه کلید در فایلی فهرست شده اند که تعداد کمی از کاربران از آن اطلاع دارند. با این حال، اگر عاقلانه از آن ها استفاده کنید، میانبرهای صفحه کلید می توانند زمانی که به شدت مرور می کنید صرفه جویی زیادی در زمان داشته باشند (شکل 2.21).
اگر قصد شما فعال کردن منوی Debug نیست، اما همچنان نیاز به دسترسی به همه این میانبرهای صفحه کلید مفید دارید، مسیر فایل زیر را در نوار آدرس مرورگر خود وارد کنید: file:///Applications/Safari.app/Contents/Resources/ Shortcuts. html و بوکمارک کنید. فایل میانبر صفحه کلید است فایل محلی، در بسته Safari ذخیره می شود، اما دسترسی به آن از طریق مرورگر بسیار ساده تر از صرف زمان برای گسترش پوشه ها و بسته ها به ترتیب برای یافتن اطلاعات مورد نیاز است.
پس از فعال کردن منوی Debug در سافاری، منطقی است که بپرسید آیا این مورد است فرصت پنهانو در دیگران برنامه های اپل. موافقم، بسیار عالی خواهد بود اگر بتوانید با هر برنامه ای مانند توسعه دهندگان رفتار کنید. متأسفانه، همه برنامه‌ها دارای منوی Debug پنهان نیستند، اگرچه برخی از آنها چنین دارند. به عنوان مثال، سعی کنید همان عملیاتی را که در این دستور العمل توضیح داده شده است را در برنامه iCal انجام دهید - منوی Debug را نیز خواهید یافت، اگرچه غنی تر از Safari است. در نهایت، در پایان، اگر می خواهید دوباره منوی Debug را مخفی کنید، تنها کاری که باید انجام دهید این است که برنامه Terminal را اجرا کنید و دستور زیر را صادر کنید:
1 پیش فرض com.apple.Safari IncludeDebugMenu 0 را بنویسید
