অধিকাংশ ব্রাউজার নির্মাতারা প্রতিদিন ওয়েব সার্ফ করতে খুঁজছেন এমন ব্যবহারকারীর উপর ফোকাস করার পাশাপাশি, তারা ওয়েব ডেভেলপার, ডিজাইনার এবং গুণমান নিশ্চিতকারী পেশাদারদেরও পূরণ করে যারা অ্যাপ এবং সাইটগুলি তৈরি করতে সাহায্য করে যেগুলি ব্যবহারকারীরা শক্তিশালী একীভূত করে অ্যাক্সেস করছে সরাসরি ব্রাউজারে টুল।
চলে গেছে সেই দিনগুলি যেখানে একটি ব্রাউজারে পাওয়া একমাত্র প্রোগ্রামিং এবং পরীক্ষার সরঞ্জামগুলি আপনাকে একটি পৃষ্ঠার সোর্স কোড দেখার অনুমতি দেয় এবং এর বেশি কিছুই না। আজকের ব্রাউজারগুলি আপনাকে জাভাস্ক্রিপ্ট স্নিপেটগুলি সম্পাদন এবং ডিবাগ করার মতো কাজগুলি করে, DOM উপাদানগুলি পরিদর্শন এবং সম্পাদনা করে, বাধাগুলি সনাক্ত করতে আপনার অ্যাপ বা পৃষ্ঠা লোড হওয়ার সাথে সাথে রিয়েল-টাইম নেটওয়ার্ক ট্র্যাফিক নিরীক্ষণ, CSS কার্যকারিতা বিশ্লেষণ করে, আপনার কোডটি নিশ্চিত করে অনেক গভীরে যেতে দেয় খুব বেশি মেমরি বা অনেক CPU চক্র ব্যবহার না করা, এবং আরও অনেক কিছু।
পরীক্ষার দৃষ্টিকোণ থেকে, প্রতিক্রিয়াশীল ডিজাইন এবং অন্তর্নির্মিত সিমুলেটরের যাদুতে একটি অ্যাপ বা ওয়েব পৃষ্ঠা বিভিন্ন ব্রাউজারে পাশাপাশি বিভিন্ন ডিভাইস এবং প্ল্যাটফর্মে কীভাবে রেন্ডার করবে তা আপনি পুনরুত্পাদন করতে পারেন। সবচেয়ে ভালো দিক হল আপনি আপনার ব্রাউজার ছাড়াই এই সব করতে পারেন!
নিম্নলিখিত টিউটোরিয়ালগুলি আপনাকে বিভিন্ন জনপ্রিয় ওয়েব ব্রাউজারে এই বিকাশকারী সরঞ্জামগুলি কীভাবে অ্যাক্সেস করতে হয় তা নিয়ে নিয়ে যায়৷
Google Chrome
ক্রোম ডেভেলপার টুলগুলি আপনাকে কোড সম্পাদনা এবং ডিবাগ করতে, পারফরম্যান্সের সমস্যাগুলি প্রকাশ করতে পৃথক উপাদানগুলিকে অডিট করতে, Android বা iOS চলমান সহ বিভিন্ন ডিভাইসের স্ক্রীন অনুকরণ করতে এবং অন্যান্য বেশ কিছু দরকারী ফাংশন সম্পাদন করতে দেয়৷
- Chrome-এর প্রধান মেনু নির্বাচন করুন, তিনটি অনুভূমিক রেখা দিয়ে চিহ্নিত এবং ব্রাউজারের উপরের ডানদিকের কোণায় অবস্থিত৷
-
যখন ড্রপ-ডাউন মেনু প্রদর্শিত হবে, আপনার মাউস কার্সারটি আরো টুলস বিকল্পের উপর ঘোরান।
Image -
একটি সাব-মেনু এখন উপস্থিত হওয়া উচিত। ডেভেলপার টুলস লেবেলযুক্ত বিকল্পটি নির্বাচন করুন। এছাড়াও আপনি এই মেনু আইটেমের জায়গায় নিম্নলিখিত কীবোর্ড শর্টকাট ব্যবহার করতে পারেন: Chrome OS/Windows (CTRL+SHIFT+I), Mac OS X (ALT(বিকল্প) +COMMAND+I)
Image -
Chrome ডেভেলপার টুলস ইন্টারফেসটি এখন প্রদর্শিত হওয়া উচিত, যেমনটি এই উদাহরণের স্ক্রিনশটে দেখানো হয়েছে। আপনার Chrome-এর সংস্করণের উপর নির্ভর করে, আপনি যে প্রাথমিক লেআউটটি দেখতে পাচ্ছেন তা এখানে উপস্থাপিত একটি থেকে কিছুটা আলাদা হতে পারে। বিকাশকারী সরঞ্জামগুলির প্রধান হাব, সাধারণত স্ক্রিনের নীচে বা ডানদিকে অবস্থিত, নিম্নলিখিত ট্যাবগুলি ধারণ করে৷
-
এই বিভাগগুলি ছাড়াও, আপনি >> আইকনের মাধ্যমে নিম্নলিখিত সরঞ্জামগুলি অ্যাক্সেস করতে পারেন, যা পারফরম্যান্স এর ডানদিকে অবস্থিত ট্যাব।
- মেমরি: একটি ওয়েব পেজে মেমরির ব্যবহার নিরীক্ষণ এবং রেকর্ড করুন। আপনি দেখতে পারেন আপনার সাইটে জাভাস্ক্রিপ্ট কতটা ভারী।
- নিরাপত্তা: সক্রিয় পৃষ্ঠা বা অ্যাপ্লিকেশনের সাথে শংসাপত্রের সমস্যা এবং অন্যান্য নিরাপত্তা-সম্পর্কিত সমস্যাগুলি হাইলাইট করে৷
- আবেদন: একটি ওয়েব অ্যাপ্লিকেশন দ্বারা ব্যবহৃত সংস্থানগুলি পরিদর্শন করুন। কি ব্যবহার করা হচ্ছে তার একটি সম্পূর্ণ ব্রেকডাউন পান৷
- অডিট: একটি পৃষ্ঠা বা অ্যাপ্লিকেশনের লোড সময় এবং সাধারণ কর্মক্ষমতা অপ্টিমাইজ করার উপায় অফার করে৷
Image -
ডিভাইস মোড আপনাকে একটি সিমুলেটরে সক্রিয় পৃষ্ঠাটি দেখতে দেয় যা এটিকে প্রায় ঠিক তেমনভাবে রেন্ডার করে যেমন এটি বেশ কয়েকটি সুপরিচিত অ্যান্ড্রয়েড সহ এক ডজনেরও বেশি ডিভাইসে প্রদর্শিত হবে। এবং iOS মডেল যেমন iPad, iPhone, এবং Samsung Galaxy। আপনাকে আপনার নির্দিষ্ট বিকাশ বা পরীক্ষার প্রয়োজনের জন্য কাস্টম স্ক্রিন রেজোলিউশনগুলি অনুকরণ করার ক্ষমতাও দেওয়া হয়েছে।
ডিভাইস মোড চালু এবং বন্ধ টগল করতে, সরাসরি এর বাম দিকে অবস্থিত মোবাইল ফোন আইকন নির্বাচন করুন উপাদান ট্যাব।
Image -
আপনি প্রথমে মেনু বোতামটি নির্বাচন করে আপনার ডেভেলপার টুলের চেহারা ও অনুভূতি কাস্টমাইজ করতে পারেন এবং উপরে উল্লিখিত ট্যাবগুলির একেবারে ডানদিকে অবস্থিত৷
এই ড্রপ-ডাউন মেনুর মধ্যে থেকে, আপনি ডকটি পুনঃস্থাপন করতে পারেন, বিভিন্ন সরঞ্জাম দেখাতে বা লুকিয়ে রাখতে পারেন সেইসাথে আরও উন্নত আইটেম যেমন একটি ডিভাইস পরিদর্শক চালু করতে পারেন৷ আপনি দেখতে পাবেন যে এই বিভাগে পাওয়া সেটিংসের মাধ্যমে ডেভ টুলস ইন্টারফেস নিজেই অত্যন্ত কাস্টমাইজযোগ্য।
Image
মোজিলা ফায়ারফক্স
Firefox-এর ওয়েব ডেভেলপার বিভাগে ডিজাইনার, ডেভেলপার এবং পরীক্ষকদের জন্য টুল রয়েছে যেমন স্টাইল এডিটর এবং পিক্সেল-টার্গেটিং আইড্রপার।
- Firefox-এর প্রধান মেনু নির্বাচন করুন, যেটি তিনটি অনুভূমিক রেখা দ্বারা উপস্থাপিত হয় এবং ব্রাউজার উইন্ডোর উপরের ডানদিকের কোণায় অবস্থিত।
-
যখন ড্রপ-ডাউন মেনু প্রদর্শিত হবে, নির্বাচন করুন ওয়েব ডেভেলপার.
Image -
ওয়েব ডেভেলপার মেনু এখন প্রদর্শিত হওয়া উচিত, নিম্নলিখিত বিকল্পগুলি সহ। আপনি লক্ষ্য করবেন যে বেশিরভাগ মেনু আইটেমের সাথে কীবোর্ড শর্টকাট যুক্ত থাকে।
- টগল টুলস: ডেভেলপার টুল ইন্টারফেস প্রদর্শন করে বা লুকিয়ে রাখে, সাধারণত ব্রাউজার উইন্ডোর নীচে অবস্থান করে। কীবোর্ড শর্টকাট: Mac OS X (ALT(OPTION)+COMMAND+I), Windows (CTRL+SHIFT+I)
- ইন্সপেক্টর: আপনাকে রিমোট ডিবাগিংয়ের মাধ্যমে সক্রিয় পৃষ্ঠার পাশাপাশি একটি পোর্টেবল ডিভাইসে CSS এবং HTML কোড পরিদর্শন এবং/অথবা টুইক করার অনুমতি দেয়। কীবোর্ড শর্টকাট: Mac OS X (ALT(OPTION)+COMMAND+C), Windows (CTRL+SHIFT+C)
- ওয়েব কনসোল: আপনাকে সক্রিয় পৃষ্ঠার মধ্যে জাভাস্ক্রিপ্ট এক্সপ্রেশন চালানোর পাশাপাশি নিরাপত্তা সতর্কতা, নেটওয়ার্ক অনুরোধ, CSS বার্তা এবং আরও অনেক কিছু সহ লগ করা ডেটার বিভিন্ন সেট পর্যালোচনা করার অনুমতি দেয়. কীবোর্ড শর্টকাট: Mac OS X (ALT(OPTION)+COMMAND+K), Windows (CTRL+SHIFT+K)
- ডিবাগার: জাভাস্ক্রিপ্ট ডিবাগার আপনাকে ব্রেকপয়েন্ট সেট করে, DOM নোড পরিদর্শন, ব্ল্যাক বক্সিং বাহ্যিক উত্স এবং আরও অনেক কিছুর মাধ্যমে ত্রুটিগুলি চিহ্নিত করতে এবং ঠিক করতে দেয়৷ ইন্সপেক্টরের ক্ষেত্রে যেমন, এই বৈশিষ্ট্যটি দূরবর্তী ডিবাগিংকেও সমর্থন করে। কীবোর্ড শর্টকাট: Mac OS X (ALT(OPTION)+COMMAND+S), Windows (CTRL+SHIFT+S)
- স্টাইল এডিটর: আপনাকে নতুন স্টাইলশীট তৈরি করতে এবং সক্রিয় ওয়েব পৃষ্ঠার সাথে অন্তর্ভুক্ত করতে বা বিদ্যমান শীটগুলি সম্পাদনা করতে এবং শুধুমাত্র একটি ক্লিকের মাধ্যমে আপনার পরিবর্তনগুলি ব্রাউজারে কীভাবে রেন্ডার হয় তা পরীক্ষা করার অনুমতি দেয়. কীবোর্ড শর্টকাট: Mac OS X, Windows (SHIFT+F7)
- পারফরম্যান্স: সক্রিয় পৃষ্ঠার নেটওয়ার্ক পারফরম্যান্স, ফ্রেম রেট ডেটা, জাভাস্ক্রিপ্ট এক্সিকিউশনের সময় এবং অবস্থা, পেইন্ট ফ্ল্যাশিং এবং আরও অনেক কিছুর বিশদ বিভাজন প্রদান করে। কীবোর্ড শর্টকাট: Mac OS X, Windows (SHIFT+F5)
- নেটওয়ার্ক: সংশ্লিষ্ট পদ্ধতি, মূল ডোমেন, প্রকার, আকার এবং অতিবাহিত সময় সহ ব্রাউজার দ্বারা সূচিত প্রতিটি নেটওয়ার্ক অনুরোধের তালিকা করে। কীবোর্ড শর্টকাট: Mac OS X (ALT(OPTION)+COMMAND+Q), Windows (CTRL+SHIFT+Q)
- স্টোরেজ ইন্সপেক্টর: একটি ওয়েবসাইট দ্বারা সংরক্ষিত ক্যাশে এবং কুকিগুলি দেখুন। কীবোর্ড শর্টকাট: (SHIFT+F9)
- ডেভেলপার টুলবার: একটি ইন্টারেক্টিভ কমান্ড লাইন ইন্টারপ্রেটার খোলে। সমস্ত উপলব্ধ কমান্ডের তালিকা এবং তাদের সঠিক সিনট্যাক্সের জন্য দোভাষীতে help লিখুন। কীবোর্ড শর্টকাট: Mac OS X, Windows (SHIFT+F2)
- WebIDE: Firefox OS চালিত একটি প্রকৃত ডিভাইসের মাধ্যমে বা Firefox OS সিমুলেটরের মাধ্যমে ওয়েব অ্যাপ তৈরি এবং কার্যকর করার ক্ষমতা প্রদান করে। কীবোর্ড শর্টকাট: Mac OS X, Windows (SHIFT+F8)
- Browser Console: ওয়েব কনসোলের মতো একই কার্যকারিতা প্রদান করে (উপরে দেখুন)।যাইহোক, প্রত্যাবর্তিত সমস্ত ডেটা শুধুমাত্র সক্রিয় ওয়েব পৃষ্ঠার বিপরীতে সমগ্র ফায়ারফক্স অ্যাপ্লিকেশনের জন্য (এক্সটেনশন এবং ব্রাউজার-লেভেল ফাংশন সহ)। কীবোর্ড শর্টকাট: Mac OS X (SHIFT+COMMAND+J), Windows (CTRL+SHIFT+J)
- প্রতিক্রিয়াশীল ডিজাইন ভিউ: ট্যাবলেট এবং স্মার্টফোন সহ একাধিক ডিভাইস অনুকরণ করতে আপনাকে তাত্ক্ষণিকভাবে বিভিন্ন রেজোলিউশন, লেআউট এবং স্ক্রীন আকারে একটি ওয়েব পৃষ্ঠা দেখার অনুমতি দেয়। কীবোর্ড শর্টকাট: Mac OS X (ALT(OPTION)+COMMAND+M), Windows (CTRL+SHIFT+M)
- আইড্রপার: স্বতন্ত্রভাবে নির্বাচিত পিক্সেলের জন্য হেক্স রঙের কোড প্রদর্শন করে।
- স্ক্র্যাচপ্যাড: স্ক্র্যাচপ্যাড আপনাকে একটি পপ-আউট ফায়ারফক্স উইন্ডোর মধ্যে থেকে জাভাস্ক্রিপ্ট কোডের স্নিপেট লিখতে, সম্পাদনা করতে, সংহত করতে এবং কার্যকর করতে দেয়। একটি ইন্টারেক্টিভ জাভাস্ক্রিপ্ট ডকুমেন্ট খুলুন যা আপনাকে কোড লিখতে এবং এটি একটি ওয়েবসাইটের বিরুদ্ধে পরীক্ষা করতে দেয়। কীবোর্ড শর্টকাট: (SHIFT+F4)
- পরিষেবা কর্মী: আপনার ওয়েব অ্যাপ্লিকেশন ডিবাগ পরিষেবা কর্মীদের। তাদের কর্মক্ষমতা এবং ত্রুটি সম্পর্কে বিস্তারিত তথ্য পান।
- পেজ সোর্স: আসল ব্রাউজার-ভিত্তিক ডেভেলপার টুল, এই অপশনটি কেবল সক্রিয় পৃষ্ঠার জন্য উপলব্ধ সোর্স কোড প্রদর্শন করে। কীবোর্ড শর্টকাট: Mac OS X (COMMAND+U), Windows (CTRL+U)
- আরো টুল পান: মোজিলার অফিসিয়াল অ্যাড-অন সাইটে ওয়েব ডেভেলপারের টুলবক্স সংগ্রহটি খোলে, যেখানে প্রায় ডজন খানেক জনপ্রিয় এক্সটেনশন রয়েছে Firebug এবং Greasemonkey হিসাবে।
Image
Microsoft Edge/Internet Explorer
সাধারণত F12 ডেভেলপার টুলস হিসাবে উল্লেখ করা হয়, কীবোর্ড শর্টকাটের একটি শ্রদ্ধা যা ইন্টারনেট এক্সপ্লোরার, IE11 এবং মাইক্রোসফ্ট এজ-এ ডেভ টুলসেটের পূর্ববর্তী সংস্করণ থেকে ইন্টারফেস চালু করেছে। মনিটর, ডিবাগার, এমুলেটর এবং অন-দ্য-ফ্লাই কম্পাইলারগুলির একটি খুব সহজ গ্রুপ অফার করার মাধ্যমে এটির সূচনা থেকে অনেক দূর এগিয়েছে৷
Microsoft আর Internet Explorer সমর্থন করে না এবং আপনাকে নতুন এজ ব্রাউজারে আপডেট করার পরামর্শ দেয়। নতুন সংস্করণ ডাউনলোড করতে তাদের সাইটে যান৷
-
আরো অ্যাকশন নির্বাচন করুন, যা তিনটি বিন্দু দ্বারা উপস্থাপিত এবং ব্রাউজার উইন্ডোর উপরের ডানদিকে অবস্থিত।
Image -
যখন ড্রপ-ডাউন মেনু প্রদর্শিত হবে, ডেভেলপার টুলস লেবেলযুক্ত বিকল্পটি নির্বাচন করুন।
Image -
ডেভেলপমেন্ট ইন্টারফেসটি এখন প্রদর্শিত হওয়া উচিত, সাধারণত ব্রাউজার উইন্ডোর নীচে। নিম্নলিখিত সরঞ্জামগুলি উপলব্ধ, প্রতিটি তাদের নিজ নিজ ট্যাব শিরোনামে ক্লিক করে বা সহগামী কীবোর্ড শর্টকাট ব্যবহার করে অ্যাক্সেসযোগ্য৷
Image - DOM এক্সপ্লোরার: আপনাকে সক্রিয় পৃষ্ঠায় স্টাইলশীট এবং এইচটিএমএল সম্পাদনা করার অনুমতি দেয়, আপনি যাওয়ার সাথে সাথে পরিবর্তিত ফলাফলগুলি রেন্ডার করে৷ যেখানে প্রযোজ্য সেখানে স্বয়ংসম্পূর্ণ কোডের জন্য IntelliSense কার্যকারিতা ব্যবহার করে। কীবোর্ড শর্টকাট: (CTRL+1)
- Console: একটি সমন্বিত API এর মাধ্যমে কাউন্টার, টাইমার, ট্রেস এবং কাস্টমাইজ করা বার্তা সহ ডিবাগিং তথ্য জমা দেওয়ার ক্ষমতা প্রদান করে। এছাড়াও, আপনাকে একটি সক্রিয় ওয়েব পৃষ্ঠায় কোড ইনজেক্ট করতে দেয় এবং রিয়েল-টাইমে পৃথক ভেরিয়েবলের জন্য নির্ধারিত মানগুলি পরিবর্তন করতে দেয়। কীবোর্ড শর্টকাট: (CTRL+2)
- ডিবাগার: আপনাকে ব্রেকপয়েন্ট সেট করতে এবং আপনার কোডটি কার্যকর করার সময় ডিবাগ করতে দেয়, প্রয়োজনে লাইন দ্বারা লাইন। কীবোর্ড শর্টকাট: (CTRL+3)
- নেটওয়ার্ক: পৃষ্ঠা লোড এবং কার্যকর করার সময় ব্রাউজার দ্বারা প্রবর্তিত প্রতিটি নেটওয়ার্ক অনুরোধের তালিকা করে যার মধ্যে রয়েছে প্রোটোকলের বিবরণ, বিষয়বস্তুর ধরন, ব্যান্ডউইথ ব্যবহার এবং আরও অনেক কিছু। কীবোর্ড শর্টকাট: (CTRL+4)
- পারফরম্যান্স: বিস্তারিত ফ্রেম রেট, সিপিইউ ব্যবহার, এবং অন্যান্য পারফরম্যান্স-সম্পর্কিত মেট্রিক্স আপনাকে পৃষ্ঠা লোডের সময় এবং অন্যান্য কার্যকলাপের গতি বাড়াতে সাহায্য করে। কীবোর্ড শর্টকাট: (CTRL+5)
- মেমরি: বিভিন্ন সময়ের ব্যবধানের স্ন্যাপশট সহ একটি মেমরি ব্যবহারের টাইমলাইন প্রদর্শন করে বর্তমান ওয়েব পৃষ্ঠায় সম্ভাব্য মেমরি ফাঁসকে আলাদা এবং সংশোধন করতে সাহায্য করে। কীবোর্ড শর্টকাট: (CTRL+6)
- ইমুলেশন: আপনাকে দেখায় কিভাবে সক্রিয় পৃষ্ঠাটি বিভিন্ন রেজোলিউশন এবং স্ক্রীন আকারে রেন্ডার করবে, স্মার্টফোন, ট্যাবলেট এবং অন্যান্য ডিভাইসের অনুকরণ করে। এটি ব্যবহারকারীর এজেন্ট এবং পৃষ্ঠার অভিযোজন সংশোধন করার ক্ষমতা প্রদান করে, সেইসাথে একটি অক্ষাংশ এবং দ্রাঘিমাংশ প্রবেশ করে বিভিন্ন ভূ-অবস্থান অনুকরণ করে। কীবোর্ড শর্টকাট: (CTRL+7)
-
কনসোল প্রদর্শন করতে অন্য যেকোন টুলের মধ্যে থাকা অবস্থায় বর্গাকার বোতাম টিপুন এর ভিতরে অবস্থিত ডান বন্ধনী সহ ডেভেলপমেন্ট টুল ইন্টারফেসের উপরের ডানদিকের কোণে।
Image -
ডেভেলপার টুল ইন্টারফেসটিকে আনডক করতে যাতে এটি একটি পৃথক উইন্ডোতে পরিণত হয়, দুটি ক্যাসকেডিং আয়তক্ষেত্র নির্বাচন করুন অথবা নিম্নলিখিত কীবোর্ড শর্টকাটটি ব্যবহার করুন: CTRL+Pআপনি দ্বিতীয়বার CTRL+P টিপে টুলগুলিকে তাদের আসল অবস্থানে ফিরিয়ে আনতে পারেন।
Image
অ্যাপল সাফারি (শুধুমাত্র ম্যাক)
Safari-এর বিভিন্ন ডেভ টুলসেট বৃহৎ ডেভেলপার সম্প্রদায়কে প্রতিফলিত করে যারা তাদের ডিজাইন এবং প্রোগ্রামিং প্রয়োজনের জন্য একটি Mac ব্যবহার করে। একটি শক্তিশালী কনসোল এবং ঐতিহ্যগত লগিং এবং ডিবাগিং বৈশিষ্ট্যগুলি ছাড়াও, একটি সহজে ব্যবহারযোগ্য প্রতিক্রিয়াশীল ডিজাইন মোড এবং আপনার নিজস্ব ব্রাউজার এক্সটেনশন তৈরি করার একটি টুলও প্রদান করা হয়েছে৷
-
আপনার স্ক্রিনের শীর্ষে অবস্থিত ব্রাউজার মেনুতে Safari নির্বাচন করুন। যখন ড্রপ-ডাউন মেনু প্রদর্শিত হবে, নির্বাচন করুন Preferences. আপনি এই মেনু আইটেমের জায়গায় নিম্নলিখিত কীবোর্ড শর্টকাটটিও ব্যবহার করতে পারেন: COMMAND+COMMA(,)
Image -
Safari এর Preferences ইন্টারফেস এখন আপনার ব্রাউজার উইন্ডোকে ওভারলে করে প্রদর্শিত হওয়া উচিত। হেডারের একেবারে ডানদিকে অবস্থিত অ্যাডভান্সড আইকন নির্বাচন করুন।
Image -
উন্নত পছন্দগুলি এখন দৃশ্যমান হওয়া উচিত। এই স্ক্রিনের নীচে একটি চেকবক্স সহ মেনু বারে ডেভেলপ মেনু দেখান লেবেলযুক্ত একটি বিকল্প রয়েছে। যদি বক্সে দেখানো কোন চেকমার্ক না থাকে, সেখানে একটি বসাতে একবার এটিতে ক্লিক করুন।
Image - পছন্দগুলি ইন্টারফেস বন্ধ করুন।
-
আপনার এখন ব্রাউজার মেনুতে ডেভেলপ নামের একটি নতুন বিকল্প লক্ষ্য করা উচিত, যা বুকমার্ক এবং উইন্ডো এর মধ্যে অবস্থিত। এই মেনু আইটেম ক্লিক করুন. নিম্নলিখিত বিকল্পগুলি সহ একটি ড্রপ-ডাউন মেনু এখন প্রদর্শিত হবে৷
- দিয়ে পৃষ্ঠা খুলুন: আপনার ম্যাকে বর্তমানে ইনস্টল করা অন্যান্য ব্রাউজারগুলির একটিতে সক্রিয় ওয়েব পৃষ্ঠাটি খুলতে আপনাকে অনুমতি দেয়।
- ব্যবহারকারী এজেন্ট: আপনাকে Chrome, Firefox এবং ইন্টারনেট এক্সপ্লোরারের বিভিন্ন সংস্করণ সহ এক ডজনেরও বেশি পূর্ব-নির্ধারিত ব্যবহারকারী এজেন্ট মান থেকে নির্বাচন করতে দেয়, সেইসাথে আপনার নিজস্ব কাস্টম সংজ্ঞায়িত করতে দেয় স্ট্রিং।
- প্রতিক্রিয়াশীল ডিজাইন মোডে প্রবেশ করুন: বর্তমান পৃষ্ঠাটিকে বিভিন্ন ডিভাইসে এবং বিভিন্ন স্ক্রীন রেজোলিউশনে প্রদর্শিত হবে এমনভাবে রেন্ডার করে৷
- ওয়েব ইন্সপেক্টর দেখান: সাফারির ডেভ টুলগুলির জন্য প্রধান ইন্টারফেস চালু করে, সাধারণত আপনার ব্রাউজার স্ক্রিনের নীচে রাখা হয় এবং নিম্নলিখিত বিভাগগুলি ধারণ করে: উপাদান, নেটওয়ার্ক, সম্পদ, সময়রেখা, ডিবাগার, স্টোরেজ, কনসোল.
- এরর কনসোল দেখান: এছাড়াও ডেভ টুল ইন্টারফেস চালু করে, সরাসরি কনসোল ট্যাবে যা ত্রুটি, সতর্কতা এবং অন্যান্য অনুসন্ধানযোগ্য প্রদর্শন করে লগ ডেটা।
- পেজ রিসোর্স দেখান: পৃষ্ঠা সোর্স দেখান বিকল্পের মতো একই ফাংশন সম্পাদন করে।
- এক্সটেনশন বিল্ডার দেখান: CSS, HTML এবং জাভাস্ক্রিপ্টের সাহায্যে সাফারি এক্সটেনশন তৈরি বা সম্পাদনা করার ক্ষমতা প্রদান করে।
- খালি ক্যাশে: বর্তমানে আপনার হার্ড ড্রাইভে সংরক্ষিত সমগ্র ক্যাশে মুছে দেয়।
- ক্যাশে নিষ্ক্রিয় করুন: Safari কে ক্যাশে করা বন্ধ করে যাতে প্রতিটি পৃষ্ঠা লোড হলে সার্ভার থেকে সমস্ত সামগ্রী পুনরুদ্ধার করা হয়।
- ছবি নিষ্ক্রিয় করুন: সমস্ত ওয়েব পৃষ্ঠাগুলিতে চিত্রগুলিকে রেন্ডার করা থেকে বাধা দেয়৷
- শৈলী অক্ষম করুন: একটি পৃষ্ঠা লোড হলে CSS বৈশিষ্ট্যগুলি উপেক্ষা করে।
- জাভাস্ক্রিপ্ট অক্ষম করুন: সমস্ত পৃষ্ঠায় জাভাস্ক্রিপ্ট এক্সিকিউশন সীমাবদ্ধ করে।
- এক্সটেনশন নিষ্ক্রিয় করুন: সমস্ত ইনস্টল করা এক্সটেনশনকে ব্রাউজারের মধ্যে চালানো নিষিদ্ধ করে।
- সাইট-নির্দিষ্ট হ্যাকগুলি নিষ্ক্রিয় করুন: যদি সক্রিয় ওয়েব পৃষ্ঠার জন্য নির্দিষ্ট সমস্যা(গুলি) স্পষ্টভাবে পরিচালনা করার জন্য Safari-কে সংশোধন করা হয়, এই বিকল্পটি সেই পরিবর্তনগুলিকে ব্লক করবে যাতে পৃষ্ঠাটি এই পরিবর্তনগুলি চালু হওয়ার আগে যেমন লোড হবে৷
- স্থানীয় ফাইল বিধিনিষেধ অক্ষম করুন: ব্রাউজারকে আপনার স্থানীয় ডিস্কে ফাইলগুলিতে অ্যাক্সেসের অনুমতি দেয়, এটি এমন একটি ক্রিয়া যা নিরাপত্তার কারণে ডিফল্টরূপে সীমাবদ্ধ।
- ক্রস-অরিজিন বিধিনিষেধ অক্ষম করুন: এই বিধিনিষেধগুলি ডিফল্টভাবে XSS এবং অন্যান্য সম্ভাব্য বিপদ প্রতিরোধ করার জন্য স্থাপন করা হয়। যাইহোক, প্রায়শই উন্নয়নের উদ্দেশ্যে তাদের সাময়িকভাবে অক্ষম করতে হয়৷
- স্মার্ট সার্চ ফিল্ড থেকে জাভাস্ক্রিপ্ট মঞ্জুরি দিন: সক্রিয় করা হলে, এটি জাভাস্ক্রিপ্ট সহ ইউআরএল প্রবেশ করার ক্ষমতা প্রদান করে: সরাসরি ঠিকানা বারে অন্তর্ভুক্ত।
- SHA-1 শংসাপত্রগুলিকে অনিরাপদ হিসাবে বিবেচনা করুন: SHA-1 অ্যালগরিদম ব্যবহার করে SSL শংসাপত্রগুলিকে ব্যাপকভাবে পুরানো এবং দুর্বল বলে মনে করা হয়৷
পৃষ্ঠার উৎস দেখান
স্নিপেট এডিটর দেখান
টাইমলাইন রেকর্ডিং দেখান
Image
