آموزش نمایش سورس‌کد صفحات وب در مرورگرهای مختلف

لایه بیرونی سایت‌ها از کدهایی تشکیل شده که توسط مرورگر دانلود می‌شوند تا صفحات وب برای شما نمایش داده شود. این کدهای HTML ساختار ظاهری سایت را تشکیل می‌دهند.

اما برای بسیاری کاربران این سوال پیش می‌آید که چرا باید این کدها را ببینیم. چند دلیل مختلف می‌تواند وجود داشته باشد؛ اول اینکه بسیاری برنامه‌نویسان بدشان نمی‌آید که نگاهی به کدهای دیگران نیز بندازند. مضاف اینکه طی پروسه نوشتن سایتی جدید گاهی ایراداتی وجود دارد که به راحتی با ابزارهایی که مروگرها به کاربر می‌دهد، این امکان وجود دارد تا در همین کدها تغییر ایجاد کرد و تغییرات و بهبودها را به صورت آنی مشاهده کرد.

و دلیل آخر اینکه گاهی بعضی از عکس‌ها یا فیلم‌هایی وجود دارد که بخواهید از صفحه دانلود کنید اما این اجازه به شما داده نمی‌شود، گاهی می‌توان از طریق کدهای سایت به آدرس آن عکس یا ویدیو دسترسی پیدا کرد.

اما چطور به این کدها دسترسی داشته باشیم؟ در زیر راهکار آن در مرورگرهای مختلف را به شما آموزش می‌دهیم.

نکته: در نظر داشته باشید که به خاطر محدودیت‌های iOS، بهترین کار این است که برنامه View Source app را نصب کنید تا در مرورگرهای مختلف بتوانید کدها را با امکانات متنوع برای آنالیز و تغییر در آن‌ها مشاهده کنید.

Google Chrome

نسخه PC: شیوه‌های نمایش متفاوتی در کروم گنجانده شده است که راحت‌ترین مسیر فشردن کلید‌های CTRL + U (COMMAND + OPTION + U در مک) است. به این ترتیب در تبی جداگانه کدها برای شما به صورت رنگ‌بندی شده نمایش داده می‌شود. با فشردن کلید F12 هم می‌توانید این بخش را در همان صفحه باز کنید. این بخش جدید می‌تواند در زیر صفحه باز شود یا اینکه در طرفین صفحه قرار بگیرد.

یک صفحه پیچیده‌تر با امکانات بیشتر نیز در کروم وجود دارد که برای دستیابی به آن باید کلیدهای CTRL + SHIFT + I (COMMAND + OPTION + I  در مک) فشرد.

نسخه اندروید: برای دسترسی به کدها در نسخه اندروید باید عبارتی را قبل از آدرس وارد کنید. این عبارت view-source: قبل از آدرس اصلی سایت است. برای مثال: view-source:http://www.persiantools.com

Microsoft Edge

نسخه ویندوز: Edge به شما امکان دیدن، آنالیز و حتی دستکاری در کدها را از طریق Developer Tools می‌دهد. برای رسیدن به این ابزار کافی است که کلید F12 را بزنید یا اینکه کلیدهای CTRL + U با هم بفشارید. برای اولین بار که  Developer Tools را اجرا می‌کنید، مرورگر دو تنظیم جدید به منو اضافه می‌کند که به شما در آنالیز بهتر کدها کمک می‌کند.

Mozilla Firefox

نسخه PC: امکانات موجود در فایرفاکس بسیار شبیه به نسخه کروم است و برای نمایش آن باید کلیدهای CTRL + U (COMMAND + U در مک) را فشرد تا کدهای HTML به نمایش در بیایند. یکی از امکانات اضافه ی این مرورگر، امکان دیدن کدهای تنها بخشی از صفحه است که به شما کمک می‌کند تا راحت‌تر به آنالیز موردی که مد نظر دارید بپردازید.

نسخه اندروید: در اینجا هم باید عنوان view-source: را به ابتدای آدرس اضافه کنید.

Apple Safari

نسخه مک: برای اینکه بتوانید کدها را در سافاری مشاهده کنید، ابتدا باید منوی Develop  را فعال کنید. برای این کار ابتدا منو را باز کنید و به Preferences option بروید. روی Advanced کلیک کنید و گزینه Show Develop menu را پیدا کنید و تیک آن را بزنید.

با مشاهده منوی Develop  می‌توانید گزینه‌ی Show Page Source را در آن ببینید. بعد از فعال سازی منو با فشرد میانبر COMMAND + OPTION + U می‌توانید به کدها دسترسی داشته باشید.