آموزش کار با اینسپکت المنت inspect element
آموزش اینسپکت المنت
سلام گرم خدمت شما کاربر عزیز
موضوع این پست رو از مشکلات یکی از کاربران انتخاب کردیم ، مخاطبین ما تو این آموزش طراحان حرفه ای نیستن این مطلب آموزشی بیشتر برای طراحان مبتدی و تازه کارها کاربرد داره، در این آموزش ویدیویی در مورد نحوه کار با اینسپکت المنت inspect element و برخی از گزینه های اون توضیحاتی رو به صورت کاملا ساده و مفهومی برای کاربران عزیز ارائه میدیم به طوری که اگر امروز اولین جلسه کار با کد های استایلتون (CSS) باشه به راحتی بتونید آموزش رو درک کنید
به احتمال خیلی زیاد شما که دارید این مطلب رو میخونید قبلا اسم اینسپکت المنت رو شنیدید یا از کاربرد و کارایی اون اطلاعاتی دارید اما شاید بعضی از دوستان از مسیر های دیگه به این مطلب رسیده باشند و لازم باشه بدونند که اینسپکت المنت چی هست اصلا؟
اینسپکت المنت inspect element چیست ؟
اینسپکت المنت (inspect element) یک افزونه (پلاگین) می باشد که از قبل به صورت پیش فرض به اکثر مرورگرها اضافه شده که از اون برای تغییرات در کدهای سایت به صورت زنده می توان استفاده کرد یعنی ما هر بخش از استایل سایت رو که بخوایم میتونیم تغییرات ایجاد کنیم و در همان لحظه تغییرات اعمال شده رو هم میتوانیم ببینم اما این تغییرات به صورت دائمی نیستن یعنی تغییرات فقط در سیستم شما اتفاق می افته و در کد های سایت ذخیره نخواهد شد و با یک رفرش ساده این تغییرات دوباره به حالت اول بر می گردد ، اما در ویدئو توضیح دادیم که چطوری تغییرات رو میتونیم ذخیره کنیم
بهترین مرورگرها برای عزیزانی که می خوان با اینسپکت المنت کار کنن فایر فاکس و کروم هستن که عموم کاربران هم از این دو مرورگر استفاده می کنند.
کروم یا فایرفاکس ؟
سوال مهم این است : دوستانی که میخواهند از اینسپکت المنت استفاده کنند بهتر است از کدام مرورگر برای این کار بهره ببرند ؟ دوستان عزیز طبق تجربه خودم شخصا مرورگر کروم رو ترجیح میدم از کروم استفاده کنم البته محبوبیت مرورگرها در چند سال گذشته متفاوت بوده اما طبق آمار ورودی سایت خودم و آمار های متفاوت دیگه محبوبیت کروم رو قاطعانه تر اثبات می کنند در تصویر زیر آمار سایت سون پلاگین که گویای محبوبیت این مرورگر می باشد را میتوانید ببینید
دوستان عزیز اگه در این مورد سوالی داشتید به صورت دیدگاه در قسمت نظرات بیان کنید
موارد ذکر شده در آموزش :
- اینسپک المنت چیست؟
- آموزش کار اینسپکت المنت
- نحوه ذخیره تغییرات داده شده در اینسپکت المنت
- و توضیحات تکمیلی
- …
لینک دانلود ویدئو
دوستان عزیز شما میتونید استایل سایت دیگران رو هم در سایت خودتون استفاده کنید که در لینک زیر آموزشش رو براتون آماده کردیم
Warning: Undefined variable $post_id in /home/pluginir/7plugin.ir/wp-content/themes/gigafile/inc/templates/blog/related.php on line 5
مطالب زیر را حتما مطالعه کنید
آموزش راه اندازی سایت مشابه سایت دیوار
آموزش نصب قالب زفایر zephyr
تغییر قیمت محصولات ووکامرس بصورت گروهی
بهینه سازی سایت های وردپرس به کمک GTMetrix
آموزش پیدا کردن و دانلود فونت سایت دیگران
آموزش نصب بسته نصبی قالب وردپرس در سی پنل cpanel
22 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
سلام
من توی یه صفحه از یک سایت از inspect استفاده میکنم
مشکلی که داره اینه که یک سری گزینه رو توی بخش element نشون میده که در بخش های دیگه نظیر response و تمام زیر شاخه های تب network وجود نداره
مقدار مربوط به ارزش یه عبارت هست
مثلا 28penbmv5bq.0.4.1.1.1.0.1.0.0.0.2″>00000042</span که توی هیچ کدوم از تب ها پیدا نمیشه
چطور میتونم مقداری که روی اون با کلیک راست در صفحه سایت و زدن inspect در قسمت المنت دیده میشه رو ببینم از کدوم ادرس میاد و ادرسش رو مشخص کنم ؟
سلام میخوام بدونم وقتی داریم ازمونیو انلاین میدیم با استفاده از این جوابای سیو شده داخل سایتو چجوری بیاریم!!
سلام
وقت بخیر
یه صفحه وب رو ذخیره کردم تا آفلاین مطالعه کنم. اما وقتی بازش میکنم بخشی از داده هاش بالا نمیاد. انگار سریع محو میشه! آیا مربوط به اسکریپت های سایت هست؟ با خیلی از نرم افزارها و افزونه ها امتحان کردم ولی افاقه نکرد.
آیا از بخش inspect میشه کاری کرد؟
ممنون میشم راهنمایی کنید.
سلام.
لطفا سایت های دیگه رو تست کنید اگر این مشکل در رابطه با سایت های دیگر هم تکرار میشه ، پس نحوه ذخیره کردنتون مشکل داره. اون رو باید اصلاح کنید.
موفق باشید.
سلام خسته نباشید!
من از سایت میرم داخل اینستا…از ابزار اینسپکت استفاده میکم و همیشه کنتر +شیف+M رو میزنم که مثل صفحه ی گوشی بشه و راحت تر ازش استفاده کنم
ولی امروز این کارو کردم صفحه یکم تار شده بود
احساس میکنم تنظیماتش بهم خورده…چجوری مثل اولش میشه؟؟
سلام کدوم مرورگر رو استفاده می کنید
با مرورگر دیگری تست کنید ببینید حل میشه
با سلام ممنون از آموزشتون
اگر تغییری که دادیم در .element باشد که در قسمت مسیر نوشته inline . حالا باید تغییرات را در کجا وارد کنیم؟
با تشکر
سلام بستگی داره میتونی بری برای اون قسمت که تغییرات دادی کلاس تعریف کنی و تغییرات و به همون کلاس که تعریف کردی بدید
یا اینکه میتونی لاینش رو پیدا کنی و استایل رو به همون حالت inline وارد کنید
درود بر شما. من ویدئو زیاد دیدم در رابطه با وردپرس ولی شما خیلی روان توضیح دادی. ممنون ازت. گویش شما هم بسیار زیبا و دلنشین بود…
سلام ممنون لطف دارید انشالله که مفید بوده باشه
آموزش خویی بی هوم شهری
و جون خوت مه ده ساله هام کرج هنی لهجه لری دارم
ده نونم چی بکم
سلام وقتتون بخیر من داخل سایتم عکس گذاشتم 4 عدد از پایین بهم چسبیدن اما از کنار باهم فاصله دارن میهواستم ازتون راهنمایی بگیرم
سلام آدرس سایتتون رو بدید بررسی کنیم
اگه میخواین از پایین فاصله بگیرن
padding-bottom : 5px;
قرار بدید درست میشه
سلام جناب باقری
خیلی عالی بود. ممنون.
قربانت امیر جان
لطف داری شما
ممنون از توضیحات خوب و ارزشمندی که دادید. من بعد از مدتها متوجه شدم چطور درست اینکار رو انجام بدم.
خواهش میکنم
اگه موردی هم هست که متوجه نشدید بنده در خدمتم
با سلام ممنون از توضیحات کاملتون
سوال من این هست که میشه کدهای اینسپک المنت رو از جایی دیگه کپی کنیم و در سایت خودمون پیست کنیم؟اگر میشه لطفا توضیح بدین چطوری؟و از کجا بفهمیم کجا باید پیستش کنیم؟
سلام بله میشه این کارو کرد
از سایت های دیگران میشه کد های استایل رو کپی کرد
در جای خاصی هم نیاز نیست جایگذاری کنید کافی در فایل استایلتون بریزید
برای این مورد هم یه ویدئو حتما تهیه میکنم
مجددا به سایت سر بزنید
به لینک زیر مراجعه نمایید آموزش برای این مورد تهیه شده
آموزش کپی کردن استایل سایت دیگران
سلام وقت بخیر
با wptable در سایت خود جدول ایجاد کردم
مشکل اینجاست که در بعضی ورژن های ios صفحه ای که ساختم کامل نمایش داده نمیشود و نمیتوان با اسکرول هم قسمتی از جدول که نمایش داده نمیشود را دید
بنده با این افزونه کار نکردم
اما طبق صحبت خوذتون این افزونه فقط برای درصد کمی از کاربران مشکل داره و برای بقیه مشکل ایجاد نمیکنه
پس خیلی نگران نباشید